Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript

Mengatasi Nilai yang sama di Dropdown atau Select Option HTML  dengan Javascript


Mengatasi duplikasi atau REMOVE DUPLICATE di dropdown ??. Mungkin cukup aneh bagi kita, tapi hal ini biasa sering kita jumpai dan bingung untuk mengatasainya. Ok langsung saja kita praktekkan.


Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript
Cara mengatasi duplikasi atau pengulangan kata di dropdown dengan javascript


Untuk penguunan SKRIPT dibawah pastaikan kita terkoneksi internet, untuk bisa menjalankan JQUERY nya atau, bisa download JQUERY  CDN di internet dulu jika koneksi internet tidak stabil.


Kode Opsi Pertama :

  1. <select class="sub_jenis_group">
  2. <option class="ini-itu">abc</option>
  3. <option class="ini-itu">abc</option>
  4. <option class="ini-itu">bcd</option>
  5. <option class="ini-itu">xyz</option>
  6. <option class="ini-itu">bcd</option>
  7. <option class="ini-itu">xyz</option>
  8. <option class="ini-itu" value="0">dodo</option>
  9. <option class="ini-itu">dodo</option>
  10. <option class="ini-itu" value="1">dodo</option>
  11. <option class="ini-itu" value="2">dodo</option>
  12. </select>
  13. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  14. <script type="text/javascript">
  15. var move = {};
  16. $(".ini-itu").each(function () {
  17. if(move[$(this).text()]) {
  18. $(this).remove();
  19. console.log('Ada yang itu');
  20. } else {
  21. move[$(this).text()] = $(this).val();
  22. console.log('Ada yang ini');
  23. }
  24. });
  25. </script>
Jika SCKRIP di atas masih kurang pas boleh di coba cara kedua yang ada di bawah..

Kode Opsi Kedua :

  1. <select class="sub_jenis_group_2">
  2. <option id="ginjal_ginjal">abc</option>
  3. <option id="ginjal_ginjal">abc</option>
  4. <option id="ginjal_ginjal">bcd</option>
  5. <option id="ginjal_ginjal">xyz</option>
  6. <option id="ginjal_ginjal">bcd</option>
  7. <option id="ginjal_ginjal">xyz</option>
  8. <option id="ginjal_ginjal" value="0">dodo</option>
  9. <option id="ginjal_ginjal">dodo</option>
  10. <option id="ginjal_ginjal" value="1">dodo</option>
  11. <option id="ginjal_ginjal" value="2">dodo</option>
  12. </select>
  13. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  14. <script type="text/javascript">
  15. var usedNames = {};
  16. $("select[class='sub_jenis_group_2'] > option").each(function () {
  17. if(usedNames[this.text]) {
  18. $(this).remove();
  19. } else {
  20. usedNames[this.text] = this.value;
  21. }
  22. });
  23. </script>
  24.  



Previous Post
Next Post
Related Posts