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").append($("<option></option>").val("0").html("selection required")); 
$("#multi_ID :selected").each(function (i, item) { 

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.

Internet Explorer v8 and Opacity Issues

A great WordPress plugin jQuery-lightbox (JQLB), used to provide animated slideshow-like viewing of images in a post seemed to be having some undesired behavior on sites viewed with Internet Explorer (IE) v8 – the plugin’s jQuery based javascript was unable to successfully set the opacity of an “overlay” <div> it created in process of showing images. All worked fine in Firefox (FF) and IE v9 but would fail (though not all the time) in IE v8 (unable to test IE v7 but it may also have similar issue). Some more testing seemed to confirm that all versions of the JQLB plugin were affect as were all versions of jQuery, but the issue only affected Windows 7/IE v8. 

Some background: When invoked JQLB’s jQuery javascript will create a <div class=’overlay’>, set its height and width equal to the page size, set the background color to black, and absolutely position it to top:0, left:0 so it covers the entire page. It also sets the <div> opacity to 80% to give a transparent affect so the underlying page is still partly visible.  On some pages and using IE v8 the affect failed and there would be no opacity with only a completely black background.

Continue reading Internet Explorer v8 and Opacity Issues