-1

我有很多这样的选择列表（数百个）（它们具有相同的名称和 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 中。

4

2 回答 2

2

你不能有双重身份证。

所以我建议通过选择中的内联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); 
};

演示在这里

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

于 2013-07-20T17:20:15.133 回答
-1

如果您可以帮助它避免重复 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);    
    });

});

小提琴

于 2013-07-20T17:39:33.757 回答