jQuery的選擇和取消選擇多個輸入點擊

Question

這裏的情景：

<select id="id_user" name="user" multiple="multiple"> 
    <option value="1">User 1</option> 
    <option value="2">User 2</option> 
    <option value="3">User 3</option> 
    <option value="4">User 4</option> 
</select> 

<span id="select1">Select 1 user</span> <span id="remove1">Remove 1 select</span> 
<span id="select2">Select 2 user</span> <span id="remove2">Remove 2 select</span> 
<span id="select3">Select 3 user</span> <span id="remove3">Remove 3 select</span> 
<span id="select4">Select 4 user</span> <span id="remove4">Remove 4 select</span> 

<script type="text/javascript"> 
    $("#select1").click(function(){ $("#id_user").val("1").prop("selected", true); 

    ??? 

    }); 
    $("#remove1").click(function(){ $("#id_user").val("1").prop("selected", false); 

    ??? 

    }); 
</script> 

我想讓用戶例如點擊選擇1跨度，然後選擇點擊2跨度和都選項會選擇多個選擇。然後，如果用戶單擊刪除1選擇跨度，只有選擇1將被刪除。我不知道如何完成這項任務。當我使用＃select2，＃select3（...）創建其他點擊功能時，單擊一個選擇，刪除最後一次點擊選中的選項。同樣的問題是刪除選項。如何創建Ctrl-點擊效果？

Answer 1

您可以動態生成控件...（見live demo）：

<div id="selectControls"></div> 

<script type="text/javascript"> 
$(function() { 
    $('#id_user > option').each(function() { 
     var $this = $(this); 
     $('#selectControls').append($('<span></span>') 
      .text("Select " + $this.val() + " user") 
      .click(function() { $this.attr('selected', true); $('#id_user').focus(); }) 
     ).append('&nbsp;').append($('<span></span>') 
      .text("Deselect " + $this.val() + " user") 
      .click(function() { $this.removeAttr('selected'); $('#id_user').focus(); }) 
     ).append('<br />'); 
    }); 
}); 
</script> 

生成自己的控件，不僅是更好的解決方案，如果您在列表中添加/刪除OPTION元素，則可以避免維護;並且如果您的選擇增長，則可以縮短從服務器下載HTML的時間。

Answer 2

如果你有這樣的HTML：

<select id="id_user" name="user" multiple="multiple"> 
    <option value="1">User 1</option> 
    <option value="2">User 2</option> 
    <option value="3">User 3</option> 
    <option value="4">User 4</option> 
</select> 
<br/> 
<span class="select" value="1">Select 1 user</span> | <span class="remove" value="1">Remove 1 select</span><br/> 
<span class="select" value="2">Select 2 user</span> | <span class="remove" value="2">Remove 2 select</span><br/> 
<span class="select" value="3">Select 3 user</span> | <span class="remove" value="3">Remove 3 select</span><br/> 
<span class="select" value="4">Select 4 user</span> | <span class="remove" value="4">Remove 4 select</span><br/> 

並用此javascript：

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

您將結束與跨度控制在多重選擇列表中選定的項目。它可以在this jsfiddle預覽。

Answer 3

我已經創建了一個工作示例爲您提供：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 4

首先控制鍵使用event.whichhttp://api.jquery.com/event.which/

也是繼使用data-屬性來定義項目編號：

<span class="item_select" data-item="1">Select 1 user</span> 

如果您改變了所有的ID爲2類，如item_select和item_remove下面將管理點擊跨度時的選擇標記：

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) 
}); 

DEMO：http://jsfiddle.net/pR9vj/6/