Question

目标： 如何根据选择框中更改的状态/值将值正确附加到div。

我知道我可以直接操作div：$（'added_options'）。追加

但假设我可能有多个名为'box＃'的类具有与下面相同的内容，我只想更改所选div中的内容，而不是全部。

（这是一个相对简单的问题。我假设我误解了$（this）.find（）对'on'事件的影响。）

jQuery的：

<script>
    $(document).ready(function(){

        $('.box1').on('change', '.select_option', function(e){
            e.preventDefault(); 
            $(this).find('.added_options').append("test");
        });
    })
</script>

HTML：

<div class="box1">
    <select class="select_option">
        <option value="" disabled selected>Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <button type="button" class="add_option">Add Option</button>
    <div class="added_options">
        <!--Added options-->
    </div>
</div>

Answer 1

由于您使用事件委派来定位select elemetn，因此处理程序内的this引用select元素，因为added_options不是select元素的后代$(this).find('.added_options')将不在那里

$(document).ready(function() {

  $('.box1').on('change', '.select_option', function(e) {
    e.preventDefault();
    $(this).closest('div').find('.added_options').append("test");
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box1">
  <select class="select_option">
    <option value="" disabled selected>Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <button type="button" class="add_option">Add Option</button>
  <div class="added_options">
    <!--Added options-->
  </div>
</div>

Answer 2

试试这个，

$('.box1').on('change', '.select_option', function(e){
   // no need of preventing here 
   $(this).closest('div.box1').find('.added_options').append("test");
});

＆＃13;

$(function() {

  $('.box1').on('change', '.select_option', function(e) {
    // no need of preventing here 
    $(this).closest('div.box1').find('.added_options').append(this.value+" test<br/>");
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
  <select class="select_option">
    <option value="" disabled selected>Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <button type="button" class="add_option">Add Option</button>
  <div class="added_options">
    <!--Added options-->
  </div>
</div>

＆＃13;

JQuery - 在更改时，附加到$（this）.find div

2 个答案: