javascript - When select one option from "multiple select", remove it from other selects (and reverse)

Question

I have 3 multiple selects like:

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

and I am looking for best solution. Wanted behaviour is when you select one item in one multi select, then remove it from the others (and conversely).

I using jquery Chosen plugin. Situation: you have 3 roles, but user can be just in one role.

jsFiddle

Answer 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
看看它是否让你高兴...... :)