11

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/の JQuery UI multiselect プラグインを使用して、選択ボックスに要素を動的に追加します

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

今、私は奇妙な問題に直面しています。選択ボックスが更新されるたびに、選択ボックスの最初のオプションが自動的に選択されます。この問題を解決する方法はありますか?

ありがとうございました

4

2 に答える 2

18

要素に multiple 属性を追加しない限り、ブラウザーは最初のオプションを自動的に選択します。

jQuery MultiSelect UI Widget javascript ソース ファイルを参照してください。次のように実装されています。

// browsers automatically select the first option
// by default with single selects
if( isSelected && !o.multiple ){
    labelClasses.push( 'ui-state-active' );
   }
于 2012-09-27T11:18:43.090 に答える
1

また、要素をループし、次のように値を選択されていないものに設定することで、常に機能することを確認できます。

  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');
                    }        
        });
 }

}

これは、動的に更新していて、それを確実にしたい場合です...私の場合、あるドロップダウンから別のドロップダウンに要素を更新/受け渡し、両方にmultiple ='multiple'属性があるため、次のことを行う必要がありました。いずれかをクリックすると削除され、基になる選択に追加されますが、それでも最初のオプションが常に選択されていることを確認してください。将来の誰かに役立つことを願っています。これは素晴らしいプラグインです。

于 2012-10-02T01:25:57.843 に答える