从"多选"中选择一个选项时,将其从其他选项中删除(和反向)

Question

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

我正在寻找最佳解决方案.通缉行为是指您在一个多选中选择一个项目,然后将其从其他项目中删除(反之).

我使用jquery Chosen插件.情况:您有3个角色,但用户只能在一个角色中.

的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
看看它是否让你满意......:)