5

次のような3つの複数選択があります。

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
</select>

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
</select>

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
</select>

そして私は最善の解決策を探しています。望ましい動作は、1 つの複数選択で 1 つの項目を選択し、それを他の項目から削除する (およびその逆) ことです。

jquery Chosen プラグインを使用しています。状況: あなたには 3 つの役割がありますが、ユーザーは 1 つの役割にしかなれません。

jsフィドル

4

1 に答える 1

1

基本的に、JS/jQuery を介してオプションを削除し、プラグインを更新します。

ここにいくつかのコードがあります

  $(".chzn-select").change(function(){   
    $(".chzn-select")   
    .not($(this))  
    .find("option[value="+$(this).val()+"]")   
    .remove();   
    $(".chzn-select").trigger("liszt:updated");   
   });

とフィドルリンクJsFiddle

編集：複数選択を処理するこの新しいフィドルを試してください 

$(".chzn-select").css('width', '300px').chosen({
        display_selected_options: false,
        no_results_text: 'not found',
    }).change(function(){
        var me = $(this);
        $(".chzn-container .search-choice").each(function(){
            var text = $('span',this).text();
            $(".chzn-select")
            .not(me)
            .find("option").each(function(){
               if ($(this).text() == text) $(this).prop('disabled',true);
            });
        });
        $(".chzn-select").trigger("liszt:updated");
});

編集済み:
これを試してください: JsFiddle
それがあなたを喜ばせるかどうか見てください... :)

于 2013-07-30T15:31:08.510 に答える