从“多项选择”中选择一个选项时,将其从其他选择中删除(并反向)

Vojtech Lacina

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

杜阿特·DJ

基本上,您想通过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
看看它是否令您满意... :)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

比较SQL中的其他2个列时,从列中选择一个ID

来自分类Dev

从下拉列表中选择一个元素从其他下拉列表中删除JQuery

来自分类Dev

在另一个下拉菜单中选择特定选项时,删除DropDownListFor选择

来自分类Dev

选择第一个选项后,更改选择中其他选项的值

来自分类Dev

从选择框中动态删除在其他选择框中选择的选项,

来自分类Dev

选择一个单选按钮时,Javascript单选按钮取消选择其他选项?

来自分类Dev

从其他网页上的链接中,在“ JQUERY”选项卡中选择一个锚点

来自分类Dev

React JS,当单击一个选项时,还将选择其他选项

来自分类Dev

调用脚本时在脚本中选择一个选项

来自分类Dev

从其他表中选择一个值时插入

来自分类Dev

选择第一个选项时使用jQuery,然后隐藏其他元素

来自分类Dev

从bash选择中选择一个选项

来自分类Dev

jQuery从其他未选择的列表中选择一个eq目标

来自分类Dev

从烧瓶中的选项中选择一个项目时如何显示闪烁消息

来自分类Dev

选中一个复选框会在Tkinter中取消选择其他选项

来自分类Dev

添加一个新选项以在 jQuery 中单击“其他”进行选择

来自分类Dev

在angularjs中进行表单编辑时在选择字段中选择一个选项

来自分类Dev

从选择中选择一个选项时更改输入的值(写入输入)

来自分类Dev

Java-如果在combox1中选择了一个值,则应在所有其他组合框中将其禁用

来自分类Dev

Java-如果在combox1中选择了一个值,则应在所有其他组合框中将其禁用

来自分类Dev

SQL查询基于列值从3个选项中选择并从其他表中选择

来自分类Dev

从其他选择选项中删除已选择的选择选项

来自分类Dev

如何使用mysql中的连接从一个表中选择一行并从其他表中选择多行,

来自分类Dev

从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

来自分类Dev

只有一个值等于并在多项选择中选择

来自分类Dev

只有一个值等于并在多项选择中选择

来自分类Dev

MySQL中的多项选择结果取决于其他选择

来自分类Dev

当从选择框中选择其他选项时,ionic2显示输入字段

来自分类Dev

几个选择 - 选择在一个选择选项时复位剩余选择

Related 相关文章

  1. 1

    比较SQL中的其他2个列时,从列中选择一个ID

  2. 2

    从下拉列表中选择一个元素从其他下拉列表中删除JQuery

  3. 3

    在另一个下拉菜单中选择特定选项时,删除DropDownListFor选择

  4. 4

    选择第一个选项后,更改选择中其他选项的值

  5. 5

    从选择框中动态删除在其他选择框中选择的选项,

  6. 6

    选择一个单选按钮时,Javascript单选按钮取消选择其他选项?

  7. 7

    从其他网页上的链接中,在“ JQUERY”选项卡中选择一个锚点

  8. 8

    React JS,当单击一个选项时,还将选择其他选项

  9. 9

    调用脚本时在脚本中选择一个选项

  10. 10

    从其他表中选择一个值时插入

  11. 11

    选择第一个选项时使用jQuery,然后隐藏其他元素

  12. 12

    从bash选择中选择一个选项

  13. 13

    jQuery从其他未选择的列表中选择一个eq目标

  14. 14

    从烧瓶中的选项中选择一个项目时如何显示闪烁消息

  15. 15

    选中一个复选框会在Tkinter中取消选择其他选项

  16. 16

    添加一个新选项以在 jQuery 中单击“其他”进行选择

  17. 17

    在angularjs中进行表单编辑时在选择字段中选择一个选项

  18. 18

    从选择中选择一个选项时更改输入的值(写入输入)

  19. 19

    Java-如果在combox1中选择了一个值,则应在所有其他组合框中将其禁用

  20. 20

    Java-如果在combox1中选择了一个值,则应在所有其他组合框中将其禁用

  21. 21

    SQL查询基于列值从3个选项中选择并从其他表中选择

  22. 22

    从其他选择选项中删除已选择的选择选项

  23. 23

    如何使用mysql中的连接从一个表中选择一行并从其他表中选择多行,

  24. 24

    从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

  25. 25

    只有一个值等于并在多项选择中选择

  26. 26

    只有一个值等于并在多项选择中选择

  27. 27

    MySQL中的多项选择结果取决于其他选择

  28. 28

    当从选择框中选择其他选项时,ionic2显示输入字段

  29. 29

    几个选择 - 选择在一个选择选项时复位剩余选择

热门标签

归档