jquery选择和取消选择多个输入而不用ctrl单击

这是场景：

 User 1 User 2 User 3 User 4  Select 1 user Remove 1 select Select 2 user Remove 2 select Select 3 user Remove 3 select Select 4 user Remove 4 select  $("#select1").click(function(){ $("#id_user").val("1").prop("selected", true); ??? }); $("#remove1").click(function(){ $("#id_user").val("1").prop("selected", false); ??? });  

我想让用户例如点击Select 1 span，然后点击Select 2 span， 两个选项将在多个select中被选中。 然后，如果用户单击“删除1”选择“跨度”，则仅删除“选择1”。 我不知道如何完成这项任务。 当我使用＃select2，＃select3（…）创建其他单击function时，单击一个选择，删除通过最终单击选择的选项。 同样的问题是删除选项。 如何创建Ctrl-click效果？

Answer 1

您可以动态生成控件…（请参阅实时演示 ）：

生成您自己的控件不仅是一个更好的解决方案，如果您在列表中添加/删除OPTION元素，它可以避免维护…如果您的选择增长，则可以缩短从服务器下载的HTML。

Answer 2

我为你创建了一个工作示例： http ： //jsfiddle.net/Gajotres/WESdZ/

 $("#select1, #select2, #select3, #select4").click(function(){ $("#id_user option[value='" + $(this).attr('id').replace("select","") + "']").prop("selected", true); }); $("#remove1, #remove2, #remove3, #remove4").click(function(){ $("#id_user option[value='" + $(this).attr('id').replace("remove","") + "']").prop("selected", false); }); 

Answer 3

如果你有这个HTML：

  User 1 User 2 User 3 User 4  
 Select 1 user | Remove 1 select
 Select 2 user | Remove 2 select
 Select 3 user | Remove 3 select
 Select 4 user | Remove 4 select
 

并使用此javascript：

 $(".select,.remove").click(function(){ var option = $("#id_user").find("option[value='" + $(this).attr("value") + "']"); option.prop("selected", $(this).is(".select")); }); 

最终将控制多个选择列表中控制所选项目的跨度。 它可以在这个jsfiddle中预览。

Answer 4

首先是控制键使用event.which http://api.jquery.com/event.which/

以下还使用data-属性来定义项目编号：

 Select 1 user 

如果您将所有ID更改为2个类，例如item_remove和item_remove ，则在单击跨度时，以下内容将管理select标记：

 var ctrlKey = false; $(document).on('keydown keyup',function(e) { if (e.which === 17) { ctrlKey = e.type=='keydown'; } }); var $user = $('#id_user') $('.item_select,.item_remove ').click(function() { var isSelect = $(this).is('.item_select'); /* reset if ctrl key not active*/ if (!ctrlKey && isSelect) { $user.val('') } $user.find('option[value="' + $(this).data('item') + '"]').prop('selected', isSelect) }); 

演示： http ： //jsfiddle.net/pR9vj/6/