4

シナリオは次のとおりです。

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

たとえば、ユーザーが [Select 1] スパンをクリックしてから [Select 2] スパンをクリックすると、両方のオプションが複数選択で選択されます。次に、ユーザーが [Remove 1 select span] をクリックすると、Select 1 のみが削除されます。そのタスクを完了する方法がわかりません。#select2、#select3 (...) で他のクリック関数を作成すると、1 つの選択をクリックすると、最後のクリックで選択されたオプションが削除されます。同じ問題は削除オプションにあります。Ctrl-クリック効果を作成するには?

4

4 に答える 4

3

この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"));
});

スパンは、複数選択リストで選択されたアイテムを制御することになります。このjsfiddleでプレビューできます。

于 2012-12-29T21:30:02.360 に答える
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);
});
于 2012-12-29T21:31:12.993 に答える
3

コントロールを動的に生成できます... (ライブデモを参照):

<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 を短くします。

于 2012-12-29T21:40:15.603 に答える
1

最初に制御キーを使用するにはevent.which http://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)
});

デモ: http://jsfiddle.net/pR9vj/6/

于 2012-12-29T21:50:26.347 に答える