Duallistbox won't return value ID for pre-selected items
Hello,
I'm new to JQuery and Javascript. For a project I'm using the following JQuery Plugin for a Multi-Select
Duallist Box .
On my site it is implemented in the following way:
Javascript:
-
$('#id_groups').DualListBox();
HTML:
-
<select id="id_groups" name="groups" multiple="multiple" data-title="Groups"
-
data-source="/ajax/getGroups?maintid={{ object.id }}" data-value="id" data-text="name"></select>
The data will be loaded via JSON. On one page I'm using the Duallistbox for chainging data, from looking into the code of the JQuery Plugin I have found, that selected data can be loaded via JSON with the selected key.
For example, if I send the following JSON Data:
- [{"id": 307, "name": "Foo1"}, {"id": 340, "name": "Foo2"}, {"name": "Foo3", "selected": 225}]
Then Foo1 and Foo2 will be displayed in the left and Foo3 in the right box. So far, so good.
However, when sending the data I won't get the ID of Foo3, just the name is send. But I need the ID.
Looking into the rendered HTML provided the following code for selects loaded via JSON:
- <select class="selected" multiple="" style="height: 200px; width: 100%;" name="groups">
- <option selected="selected">
- Foo3
- </option>
Obviously the <option>-Tag is missing the <value>-Tag. When comparing with rendered code after manually
selecting an option, the <value>-Tag is present:
- <select class="selected" multiple="" style="height: 200px; width: 100%;" name="groups">
- <option value="4978">
- Foo3
- </option>
I haven't found anything regarding the problem within the plugin documentation. I guess either I'm sending wrong JSON or the plugin doesn't deal with pre-selects properly. Unfortunately I have best experiences with this plugin when dealing with lots of select options (over 2500), so I'd like to use it further.