【问题标题】:Populating selected items at the right box of DualListBox填充 DualListBox 右侧框中的选定项
【发布时间】:2016-04-21 09:48:15
【问题描述】:

我正在使用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>

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

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

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

EDIT-2:为了检查,您可以将此值作为已选择 -

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

【问题讨论】:

  • 你真的需要 ajax 来获取值吗?
  • 是的。我需要从外部来源获取值并将其中一些过滤为“已选择”。
  • 错误怎么办?
  • 没有错误显示。我已经检查了带有检查元素的框。选择标签内没有数据作为选项加载。我也检查了选项字符串。它正在正确生成。
  • 在控制台中,不在页面上,伙计

标签: javascript jquery html twitter-bootstrap-3


【解决方案1】:

options 更改为 option 人 :)

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/

【讨论】:

  • 哇,谢谢。一个简单的小错误可能会导致数小时的挫败感。非常感激。 :) 顺便说一句,我正要为这个问题开放赏金。幸运的是,我的名声幸存下来了。
猜你喜欢
  • 2017-09-02
  • 2010-10-24
  • 1970-01-01
  • 1970-01-01
  • 2012-01-04
  • 1970-01-01
  • 2012-10-30
  • 2013-08-19
  • 2023-02-25
相关资源
最近更新 更多