在 jquery 中使用变量作为占位符更新 select 选项

Question

在我的项目中，一个页面可以有一个或多个 selects 选项填充数据库值，意味着 select 具有不同 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（由 space 分隔）：

<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 中使用变量作为占位符更新 select 选项

Updating select options using variable as placeholder in jquery

jquery

html-select