javascript - 填充 DualListBox 右侧框的所选项目

标签 javascript jquery html twitter-bootstrap-3

我正在使用this用于为 twitter-bootstrap-3 中表单的选择字段创建 DualListBox 的插件。该表格是为了编辑目的而创建的。所以我尝试在右侧框中添加之前选择的值。并且未选择的值也是手动添加的。

为了实现这一点,我从 JSON 中收集了数据并手动创建选项字符串。这是我的代码 -

// Getting data related to the country of operations
    $.getJSON(country_of_operation_json_url)
        .done(function (data) {
            var options = '';

            for (var i = 0; i < data.length; i++) {
                var a = 1;
                for (var j = 0; j < port_ids.length; j++) {
                    // Appending "selected" attribute to the values which are already selected
                    if (port_ids[j] == data[i]["id"]) {
                        options += '<options value="' + data[i]["id"] + '" selected="selected">' + data[i]["port_iso"] + '</options>';
                        a = 0;
                    }
                }
                if (a == 1) {
                    options += '<options value="' + data[i]["id"] + '">' + data[i]["port_iso"] + '</options>';
                }
            }

            // Appending the options at the selected box of the dual box
            $("select#country-of-operation-edit").empty().append(options);

            // Loading Country of operating dual-box field
            $("#country-of-operation-edit").DualListBox();

        });

这是生成选择字段的 html 文件 -

<div class="form-group row">
                    <label class="col-sm-2 form-control-label">Country of operation</label>
                    <div class="col-sm-10">
                        <select class="form-control" multiple="multiple" data-json="false" id="country-of-operation-edit">
                        </select>
                    </div>
                </div>

问题是该字段中没有显示任何值。这是屏幕截图 -

enter image description here

我找不到我在这里做错了什么。如果这不是用值填充 DualListbox 的方法,还有其他方法吗?任何帮助将不胜感激。我被困在这里几个小时了。

编辑1:这是我的json - http://codebeautify.org/jsonviewer/cb7e1573

EDIT-2:为了进行检查,您可以将此值视为所选​​值 -

port_ids = ["41", " 47", " 61"]

最佳答案

选项更改为选项 man :)

for (var i = 0; i < data.length; i++) {
                var a = 1;
                for (var j = 0; j < port_ids.length; j++) {
                    // Appending "selected" attribute to the values which are already selected
                    if (port_ids[j] == data[i]["id"]) {
                        options += '<option value="' + data[i]["id"] + '" selected="selected">' + data[i]["port_iso"] + '</option>';
                        a = 0;
                    }
                }
                if (a == 1) {
                    options += '<option value="' + data[i]["id"] + '">' + data[i]["port_iso"] + '</option>';
                }
            }

https://jsfiddle.net/hh2zrt82/

关于javascript - 填充 DualListBox 右侧框的所选项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36765846/

相关文章:

javascript - 无法从 VALUE_STRING 中反序列化 java.util.List 的实例

javascript - Jquery href() 悬停时不触发

javascript - 在 JavaScript 中哪里添加可见性切换?

jquery - 在 JQuery 中单击调用 ColdFusion 方法

css - HTML5 表单选择字段直到悬停才显示

javascript - 我需要如何更改这些 TypeScript mixin 类型定义才能允许定义允许类扩展特征的 mixin?

javascript - 动态创建的元素上的事件绑定(bind)?

javascript - anchor 无法正常工作?

javascript - 无法使用 CSS 对齐 HTML 和 SVG 元素

javascript - 非常长的 CSS 列的分节符