ni8mr ni8mr - 7 months ago 45
Javascript Question

Populating selected items at the right box of DualListBox

I am using this plugin to create a DualListBox for a selection field for a form in twitter-bootstrap-3. The form is created for edition purpose. So i am trying to add the previously selected values in the right-sided box. And also non-selected values are added manually.

To achieve this i have collected data from a JSON and make options string manually. Here is my code -

// 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();

});


Here is the html file that is generating select field -

<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>


Problem is there are no values showing in the field. Here is the screenshot -

enter image description here

I couldn't find what am i doing wrong here. If this is not the way to populate the DualListbox with values, what are the other ways? Any help would be appreciated much. I am stuck here for hours.

EDIT-1: Here is my json - http://codebeautify.org/jsonviewer/cb7e1573

EDIT-2: For checking, you can take this values as selected -

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

Answer

Change options to 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/