javascript - node - server sent events browser support

La primera opción se selecciona automáticamente cuando el cuadro de selección con JQuery Multiselect UI de Eric Hynds se actualiza dinámicamente

Question

Estoy usando el plugin multiselección JQuery UI en http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ para agregar elementos dinámicamente a un cuadro de selección

//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)

Ahora, estoy enfrentando un problema extraño. La primera opción en el cuadro de selección se selecciona automáticamente cada vez que se actualiza el cuadro de selección. Alguna manera de arreglar este problema ?

Gracias

Answer 1

Los navegadores seleccionarán automáticamente la primera opción a menos que agregue el atributo múltiple al elemento.

Vea en usted jQuery MultiSelect UI Widget javascript source file, Han implementado lo siguiente

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

Answer 2

y siempre puedes asegurarte de que funciona al recorrer los elementos y establecer el valor como no seleccionado, así como:

  click: function(event, ui){

 if(!ui.checked) 
 {   $.each( $(''#select2 option''),function(i2, element2)
       {
                if( $(element2).val() === ui.value )
                {
                   if( $(element2).is('':selected'') ) { 
             $(element2).attr(''selected'',false); 
                }
                     $(element2).remove().appendTo(''#select1'');
                    }        
        });
 }

}

Esto es solo en el caso de que esté actualizando dinámicamente y quiera asegurarse de que sea así ... en mi caso yo estaba actualizando / pasando elementos de un menú desplegable a otro y ambos tenían el atributo múltiple = ''múltiple'', así que necesitaba Asegúrate de que al hacer clic en uno se está eliminando, y luego añádalo a la selección subyacente, pero la primera opción siempre se seleccionó. Espero que ayude a alguien en el camino. Es un buen complemento.