jQuery: Getting values from multiple dropdown box

JavaScript
1

Hi,

I have a multiple dropdown box with a list of boxes.

<label for="rightBarBox[]">Right Bar Box</label>
<select name="rightBarBox[]" multiple>
     <option value="0" selected="selected">none</option>
     <option value="4">Lose Wheat, Lose Weight</option>
     <option value="3">The Big Book of Wheat Free Cooking</option>
     <option value="2">Learn To Cook Wheat, Gluten and Dairy Free</option>
     <option value="1">The Gluten, Wheat & Dairy Free Cookbook</option>
</select>

<ol id="sort-boxes">
     <li>List Item 1</li>
     <li>List Item 2</li>
     <li>List Item 3</li>
     <li>List Item 4</li>
</ol>

What I intend to do is when the user clicks on the options they choose, each option is duplicated into an ordered list to the right of the dropdown box, with each list item being ‘sortable’ (using the sortable jQuery UI). At the moment I am trying to get the values from the multiple dropdown box into the unordered list, which is where I am struggling and require some advice. Then ultimately, the user can shuffle the order of the values in the ordered list and save that order to a database.

2

These should help get you started:

http://api.jquery.com/val/
http://api.jquery.com/selected-selector/

You’ll want to use the :selected selector.

Add an id tag to the select element, then you can do something like this:


$('#yourid:selected').each(function(){
var thevalue = $(this).val();
var thetext = $(this).text();
//your code here
});
3

Thanks, will look up on those 2 and do some research into how to implement them and let you know how it goes…