Question

Im using the JQuery UI multiselect plugin by http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ to dynamically append elements to a select box

//Make filter cars multiselect
$("#cars_filter").multiselect({noneSelectedText:'Select cars'});

function populateCarfilter(){
    var opts="<option value=''>Select cars</option>";
    $.each(markers, function(idx, mar){
      if(mar.getVisible() && mar.get("car"))
     opts+="<option value='" + mar.get("id") + "'>" + mar.get("driver") + " - " + mar.get("car") + "</option>";
    });

    if($("#cars_filter").html()!=opts){
      var id = $("#cars_filter").val()
      $("#cars_filter").html(opts);
      $("#cars_filter").val(id);
      $("#cars_filter").multiselect('refresh');
    }    
}

populateCarfilter(); //This gets called every 2 secs automatically by SSE (server sent events)

Now, im facing a strange problem. The first option in the select box gets selected automatically everytime the select box is updated. Any way to fix this problem ?

Thank You

Answer 1

Browsers will automatically select the first option unless you add the multiple attribute to the element.

See in you jQuery MultiSelect UI Widget javascript source file, They have implemented following

// browsers automatically select the first option
// by default with single selects
if( isSelected && !o.multiple ){
    labelClasses.push( 'ui-state-active' );
   }