Documentation Gap

[GlennBrand]

There are times when we need to show items selected in a previous edit session. The documentation demonstrates how oranges are put in the right list box. In the documentation the code looks like this and oranges indeed go to the right list box:

$("#demo2-add").click(function() { demo2.append('ApplesOranges'); demo2.bootstrapDualListbox('refresh'); });

$("#demo2-add-clear").click(function() { demo2.append('ApplesOranges'); demo2.bootstrapDualListbox('refresh', true); });

This code actually does not do that it puts oranges in the left list box. If we get the demo page and take a close look at the code we can see selected is included in the option text. The bootstrap-duallistbox code does an excellent job at putting that formatted option in the right list box and avoiding overwriting it when the user makes a new selection to modify the right list.

All of this is critical if that is what you want. However the requirement to put selected in the option string is not apparent, thus confusion results and many hours of research ensue. There are no apparent blogs referring to this problem and in the end if you get the demo page you might notice the selected key word shown in this code snippet and the actual button handler itself.

<pre class="prettyprint">
    $("#demo2-add").click(function() {
        demo2.append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
        demo2.bootstrapDualListbox('refresh');
    });
    $("#demo2-add-clear").click(function() {
        demo2.append('<option value="apples">Apples</option><option value="oranges" selected>Oranges</option>');
         demo2.bootstrapDualListbox('refresh', true);
    });
</pre>

I would like to request that this fact be documented in the readme file so others can avoid the hours of research to figure it out.

Warm Regards. Great tool. Glenn Brand