jQuery - 当有几个时从select中获取值

I am dynamically inserting many selects on to my page depending on user inputs. The select lists are identical and share similar names.

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

When the user chooses an option, I want to grab that value. (In the end what I'm trying to accomplish is to disable the chosen value from all other lists, but re-enable it if the value is changed. But one step at a time)

当用户选择一个选项时,我想获取该值。 (最后我要完成的是禁用所有其他列表中的选定值,但如果值发生更改则重新启用它。但是一次一步)

I am assuming that I will need to use $(this) but I apparently do not know how to get the values from the second, third lists, and so on.

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

The HTML would be something like 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

As for my jQuery, I was trying something like this:

至于我的jQuery,我正在尝试这样的事情:

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

But that only gives me the value from the first select, and not from any subsequent ones. My understanding is that I have to use $('body') or $('document') since they are dynamically created elements.

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

Any help would be appreciated, thank you.

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

2 个解决方案

#1

Remove the $( before the selector. The selector needs to be a string, not jQuery object

删除$(在选择器之前。选择器需要是一个字符串,而不是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>

#2

This is how I would do it: DEMO FIDDLE

我就是这样做的: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);
         }
     });
 });

#1