Question

我有很多这样的选择列表（数百个）（它们具有相同的名称和ID（我认为我的问题来自这里......但我无法改变它）：

<select name="custom_element_grid_class" id="custom_element_grid_class" class="select-size">
    <option value="normal">normal</option>
    <option value="square">square</option>
    <option value="wide">wide</option>
    <option value="tall">tall</option>
</select>

我希望在用户更改值时获取每个列表的值。我制作了这个剧本，但它只适用于我的拳头选择列表...

jQuery("#custom_element_grid_class").change(function(){
    var element = jQuery(this);
    var selected = element.find('option:selected'); 
    var size = selected.val(); 
    var sclass = size + " element isotope-item";
    jQuery(element).closest('.element').attr('class',sclass);    
});

如何让它适用于我选择的所有表格？

编辑：每个选择列表来自ajx调用，这就是我拥有相同ID的原因，但仅限于未来DOM。

Answer 1

你不能拥有双重身份证。

所以我建议在select中使用inline onchange来调用函数。例如：

<select name="custom_element_grid_class" id="custom_element_grid_class" onchange="func(this)" class="select-size">

然后你的功能：

function func(el){
    var element = el;
    var size = element.value; 
    var sclass = size + " element isotope-item";
    jQuery(element).closest('.element').attr('class', sclass); 
};

Demo here

我建议添加一个没有值的第一个选项，因此，正如你所说的“当用户更改值时”，你可以阅读以防他取第一个值。

Answer 2

如果您可以帮助避免重复ID以换取课程。如果这不是一个选项，请使用属性选择器。稍微修改上面的代码。

文件就绪

$(function()
{

    $('[name=custom_element_grid_class]').change(function(){
        var $element = $(this);
        var size = $element.val(); 
        var sclass = size + " element isotope-item";
        $element.closest('.element').attr('class',sclass);    
    });

});

Fiddle

jquery，获取不同选择列表的值

2 个答案: