ListBox from Select Tags, Setting Up Options

[HyneParticipant]

I have been running into a few little quirks when trying to set up a multiselect ListBox and am fairly convinced that I must be misunderstanding the directions. When set up like the “select tag” example everything works beautifully for single select, however things gets weird the moment I start introducing any options. The script included is the jqx-all.js instead of the individual scripts if that is relevant.

<div>
    <label for="ItemIds">Items</label>
    <select id="ItemIds" multiple="multiple">
        <option value="1" selected="selected">Item 1</option>
        <option value="3" selected="selected">Item 2</option>
        <option value="4">Item 3</option>
        <option value="5" selected="selected">Item 4</option>
        <option value="7">Item 5</option>
        <option value="8">Item 6</option>
    </select>
</div>
<script>
    $(function () {
        $("#ItemIds").jqxListBox({ multiple: true });
    });
</script>

Setting the “multiple” option removes all but the last selection when creating the widget. In this example Item 4 would be the only item selected, both in the displayed widget as well as in the original base select list options. The “multipleextended” option behaves the same.

The “checkboxes” option on the other hand shows all the appropriate selections upon creation, but has its own set of quirks. Checking items in the list works perfectly, but unchecking items seems to have a strange delayed effect in the base select list. If an option is unchecked the effect take not take place and the base select list option retains its “selected” attribute until the next action takes place. This can be either checking or unchecking another item, though in the case of unchecking the base list options continue to lag behind by the most recent action.

Any help or direction would be much appreciated.

[HristoParticipant]

Hello Hyne,

If you would like to have selected item by default could use iteration with some of those methods – selectItem and selectIndex.
Please, take a look at this example.
About checkboxes could you provide us an example that demonstrate this delay and please try to update to latest version.
Also if you do not like to see previous selected item could use ‘clearSelection’ method of the jqxListBox.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts