使用 JS/JQuery 从附加的选择器选项中获取值

Question

I'm trying to get the value from an appended selector with a JQuery function. The function works well with the main element, that was not appended, but does nothing with the appended ones.

My code:

<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>

The function I'm using now for get the values:

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

Answer 1

The issue is because you always target $('.mySelector option:selected') . This will only ever look at the first instance of the .mySelector element in the DOM.

From the context of the logic it appears that you want to look at the selected options within the select that raised the change event. As such you need to use this and find() . Also note that it would make more sense to update .newDiv once after the loop completes:

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

The logic could also be made more slightly succinct by using map() :

$(document).on('change', '.mySelector', function () {
  var str = $(this).find('option:selected').map(function () {
    return $(this).text();
  }).get().join('');
  $('.newDiv').text(str);
});