从“多选项”中选择一个选项后，将它从其他选择中移除（并反之亦然）

Question

从“多选项”中选择一个选项后，将它从其他选择中移除（并反之亦然）

5

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>

我希望你能提供最佳解决方案。期望的行为是当您在一个多选框中选择一个项目时，然后将其从其他多选框中删除（反之亦然）。

我使用jquery Chosen插件。

情况：您有3个角色，但用户只能有一个角色。

jsFiddle

- Vojtech Lacina

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- JDuarteDJ · Accepted Answer

基本上您想通过JS / jQuery删除选项并更新插件。这里是一些代码。

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

并且有一个小提琴链接 JsFiddle

EDIT: try this new fiddle it handles multiple select

$(".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 看看它是否适合你… :)