Question

我根据用户输入动态地在页面上插入许多选择。选择列表是相同的，并且具有相似的名称。

当用户选择一个选项时，我想获取该值。（最后我想要完成的是从所有其他列表中禁用所选值，但如果值已更改则重新启用它。但是一次一步）

我假设我需要使用$(this)，但我显然不知道如何从第二个，第三个列表中获取值，依此类推。

HTML将是这样的：

<select name="category[first]">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select name="category[second]">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

** Many more lists with the same naming convention

至于我的jQuery，我正在尝试这样的事情：

$('body').on('change', $('select[name^="category"]', function(){
    alert( $(this).find('option:selected').val() );
});

但是这只给了我第一个选择的值，而不是任何后续选择的值。我的理解是我必须使用$('body')或$('document')，因为它们是动态创建的元素。

任何帮助将不胜感激，谢谢。

Answer 1

删除选择器前的$(。选择器需要是一个字符串，而不是jQuery对象

$('body').on('change', 'select[name^="category"]', function(){
    console.log( $(this).find('option:selected').val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="category[first]">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select name="category[second]">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Answer 2

我就是这样做的：DEMO FIDDLE

 $('body').on('change', 'select', function () {
     var selected_value = $(this).val();
     $('select option').each(function(){
         if(this.value == selected_value){
             $(this).prop('disabled', true);
         } else {
             $(this).prop('disabled', false);
         }
     });
 });

jQuery - 当有多个

2 个答案: