jQuery: Build Select List From All Selected Values in Multiple Select List

jquery_icon80I was recently working on a form where I needed to build a dropdown select list from the values a user would select within a different multi-select listbox.  The select list would be disabled by default and would be enabled and populated based on user selections. Took me some research over at jQuery as I’m far from any kind of expert on jQuery but this is code I came up with and it appears to be working,

var currSelected; 
currSelected = $("#ddl_org :selected").val(); 
$("#ddl_org").empty(); 
$("#ddl_org").append($("<option></option>").val("0").html("selection required")); 
$("#multi_ID :selected").each(function (i, item) { 
   $("#ddl_org").append($("<option></option>").val($(item).val()).html($(item).html())); 
}); 
$("#ddl_org").attr("selected","selected").val(currSelected);

The dropdown list to be built is referenced by id=’ddl_org’ and the multi-select is referenced by id=’multi_ID’.

So the code basically follows this logic:

  • Save the currently selected value of the dropdown since it might already be enabled.
  • empty all the values from the dropdown.
  • append the first option to the select list that lets the user know a selection is required
  • go to our multi-select and for each selected item append the value and label to the select option list to build the dropdown.
  • set the selected value if one was previously selected.