0

以下の機能を実装したいと考えています。

「n」個の「select」タグがあり、値を選択すると (変更イベントで)、選択された値が他の「select」タグから削除されます。ユーザーが現在選択されているドロップダウンリストの値を再度変更した場合、以前に選択した値を他の「select」タグの元の位置に追加したいと思います。

一部を削除して部分的に追加することができます（元の位置に以前の値を追加する必要があります）。

HTML:
<div class="container">
    <input id="preval" class="hidden" type="text" value="" name=""/>
    <select class="selectoption">
        <option value="1">1</option>
        <option value="ab">ab</option>
        <option value="xysd">xysd</option>
        <option value="4">4</option>                
    </select>
</div>
<div class="container">
    <select class="selectoption">
        <option value="1">1</option>
        <option value="ab">ab</option>
        <option value="xysd">xysd</option>
        <option value="4">4</option>                
    </select>
</div>
<div class="container">
    <select class="selectoption">
        <option value="1">1</option>
        <option value="ab">ab</option>
        <option value="xysd">xysd</option>
        <option value="4">4</option>                
    </select>
</div>

CSS:

.hidden{
    display:none;
}

JAVASCRIPT:
$(document).ready(function(){

    $(".selectoption").change(function(e){
                var currentvalue = $(e.currentTarget).val();    
    /*to remove selected option from other drop down list  */ $('.selectoption').not($(e.currentTarget)).children('option[value='+currentvalue+']').remove();
            var currindex = $(e.currentTarget).index();
            var prevval = $('#preval').val();       
            var previndex = $('#preval').attr("name");

        $('#preval').val(currentvalue);
        $('#preval').attr('name',previndex);
        /*apped previous value */
        if(previndex == currindex){
                    $('.selectoption').not($(e.currentTarget)).append('<option value='+prevval+'>'+prevval+'</option>');                    
                }
    });        
});


JSFiddle:
http://jsfiddle.net/GG3S5/1/
4

1 に答える 1

1

次回は質問を簡素化してください。<option>他の で選択したを非表示にします<select>か?

この助けを願っています、http://jsfiddle.net/GG3S5/9/

于 2013-04-07T08:37:54.353 に答える