我正在使用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的方法,还有其他方法吗?任何帮助将不胜感激。我在这里呆了几个小时。
编辑1:这是我的json-http://codebeautify.org/jsonviewer/cb7e1573
EDIT-2:要进行检查,您可以选择此值-
port_ids = ["41", " 47", " 61"]
最佳答案
将options
更改为option
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/