Question

我有一个按钮，分别产生一个选择器和一个div，它们都有唯一的ID。我正在尝试使用JQuery函数从这些唯一的附加选择器之一中获取值。到目前为止，我可以从选择器选项中获取值并显示在div中，但它会在生成的其他所有div中显示。我只想在与选择器相关的div中显示。

$(document).on('click', '#createNewLayer', function () {
      $('#mainSeparator').append(
        '<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>'
      );
});

$(document).on('change', '.mySelector', function () {
  var str = $(this).find('option:selected').map(function () {
    return $(this).text();
  }).get().join('');
  $('.newDiv').text(str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<button type="button" class="btn btn-primary" id="createNewLayer" style="margin-top: 20px;">New Layer</button>

Answer 1

您必须将$('.newDiv').text(str)切换为$(this).closest('.newLayer').find('.newDiv').text(str);

问题是您没有针对特定的$('.newDiv')，而是所有目标。

工作演示

$(document).on('click', '#createNewLayer', function() {
  $('#mainSeparator').append(
    '<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>'
  );
});

$(document).on('change', '.mySelector', function() {
  var str = $(this).find('option:selected').map(function() {
    return $(this).text();
  }).get().join('');
  $(this).closest('.newLayer').find('.newDiv').text(str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<button type="button" class="btn btn-primary" id="createNewLayer" style="margin-top: 20px;">New Layer</button>

使用Javascript或JQuery从唯一的附加选择器获取值

1 个答案: