Duallistbox won't return value ID for pre-selected items

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:
  1. $('#id_groups').DualListBox();


HTML:
  1. <select id="id_groups" name="groups" multiple="multiple" data-title="Groups" 
  2. 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:
  1. [{"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:
  1. <select class="selected" multiple="" style="height: 200px; width: 100%;" name="groups">
  2. <option selected="selected">
  3. Foo3
  4. </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:

  1. <select class="selected" multiple="" style="height: 200px; width: 100%;" name="groups">
  2. <option value="4978">
  3. Foo3
  4. </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.