Question

在我的项目中，页面可以有一个或多个选项，其中的选项填充了数据库值，意味着选择具有不同ID的字段可以具有相同的选项。

例如：

<select id="set-0-costID">
    <option value="1">Name1</options>
    <option value="2">Name2</options>
    <option value="3">Name3</options>
</select>
<select id="set-1-costID">
    <option value="1">Name1</options>
    <option value="2">Name2</options>
    <option value="3">Name3</options>
</select>

如果p.e.选项== 1的文本在id为“set-0-costID”的字段中更改我想使用Jquery更新id为“* costID”的所有其他字段。

此代码有效：

$("[id$='costID']").each(function(index, elem){
    var $el = $('#' + elem.id);
    $('#' + elem.id + ' option[value="1"]').text('Name1new');
    $el.selectpicker("refresh");
});

但是我必须更加灵活，并希望将所有可用的字段名存储在一个字典中并通过它循环。

此代码不起作用。没有错误，但选项没有更新。

var fields=['cost1ID', 'cost2ID']; var field_name="";
for (f in fields) {
    field_name = fields[f];  
    $("[id$=field_name]").each(function(index, elem){
        var $el = $('#' + elem.id);
        $('#' + elem.id + ' option[value="1"]').text('Name1new');
        $el.selectpicker("refresh");
    });
};

我猜Jquery会将field_name解释为要搜索的名称而不是变量。我如何更改代码以使其正常工作？感谢

Answer 1

我不确定这会解决问题，但会尝试替换：

$("[id$=field_name]").each(function(index, elem){

通过：

$("[id$='"+field_name+"']").each(function(index, elem){

希望这有帮助。

Answer 2

迟到了，但你考虑过数据属性吗？它可能会使您的代码更加灵活。

在这里，我创建了一个名为data-update的属性，列出了要更新的每个ID（用空格分隔）：

<select id="set-0-costID" data-update="#set-1-costID #set-2-costID">
    <option></option>
    <option value="1">Name1</option>
    <option value="2">Name2</option>
</select>
<select id="set-1-costID" data-update="#set-0-costID #set-2-costID">
    <option></option>
    <option value="1">Name1</option>
    <option value="2">Name2</option>
</select>
<select id="set-2-costID" data-update="#set-0-costID #set-1-costID">
    <option></option>
    <option value="1">Name1</option>
    <option value="2">Name2</option>
</select>

jQuery的：

$(document).on('change', '[data-update]', function(){
    var a = $(this).data('update').split(' '), index;
    for (index = 0; index < a.length; ++index) {
        $(a[index]).val( $(this).val() );
    }
});

JSFiddle demo with IDs

这也适用于班级：JSFiddle demo with classes

在jquery

2 个答案: