Question

我正在尝试使用JQuery函数从附加的选择器中获取值。该函数与未附加的主元素配合使用良好，但对附加的元素则无效。

我的代码：

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

我现在用于获取值的函数：

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

在newLayer内有一个附加其他mainSeparator的按钮。

Answer 1

问题是因为您始终以$('.mySelector option:selected')为目标。这只会查看DOM中.mySelector元素的第一个实例。

从逻辑的上下文来看，您似乎想查看引发select事件的change内的中的选定选项。因此，您需要使用this和find()。还要注意，在循环完成后更新.newDiv会更有意义：

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

使用map()也可以使逻辑更简洁：

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

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

1 个答案: