javascript - 当从 "multiple select"选择一个选项时，将其从其他选择中删除(并反转)

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 个 Angular 色，但用户可以只担任一个 Angular 色。

jsFiddle

Answer 1

基本上你想通过 JS/jQuery 删除选项并更新插件。

代码如下

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

和一个 fiddle 链接 JsFiddle

编辑: 试试这个新的 fiddle ，它可以处理多个选择

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