Saya mencoba mendapatkan nilai dari pemilih yang ditambahkan dengan fungsi JQuery. Fungsi ini bekerja dengan baik dengan elemen utama, yang tidak ditambahkan, tetapi tidak melakukan apa pun dengan elemen yang ditambahkan.

Kode saya:

<div id="mainSeparator">
      <div id="newLayer" class="newLayer">        
        <div class="form-row">
          <div class="form-group col-md-6">
            <select class="form-control mySelector" id="selector">
              <option hidden disabled selected value>Select an option</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
          </div>
        </div>
        <div class="newDiv"></div>
      </div>      
    </div>

Fungsi yang saya gunakan sekarang untuk mendapatkan nilai:

$(document).on('change', '.mySelector', function () {
      var str = "";
      $('.mySelector option:selected').each(function () {
        str += $( this ).text();
        $('.newDiv').text(str);
      })
    });
1
leonardofmed 14 Maret 2019, 15:39

1 menjawab

Jawaban Terbaik

Masalahnya adalah karena Anda selalu menargetkan $('.mySelector option:selected'). Ini hanya akan melihat contoh pertama elemen .mySelector di DOM.

Dari konteks logika, tampaknya Anda ingin melihat opsi yang dipilih dalam select yang memunculkan peristiwa change. Karena itu, Anda perlu menggunakan this dan find(). Perhatikan juga bahwa akan lebih masuk akal untuk memperbarui .newDiv sekali setelah loop selesai:

$(document).on('change', '.mySelector', function () {
  var str = "";
  $(this).find('option:selected').each(function () {
    str += $(this).text();
  });
  $('.newDiv').text(str);
});

Logikanya juga bisa dibuat lebih ringkas dengan menggunakan map():

$(document).on('change', '.mySelector', function () {
  var str = $(this).find('option:selected').map(function () {
    return $(this).text();
  }).get().join('');
  $('.newDiv').text(str);
});
2
Rory McCrossan 14 Maret 2019, 13:16