How to remove and append value in drop down list on change event of another drop down list

Question

I want to implement following functionality.

There will be 'n' number of 'select' tags and on selecting the value (on change event) that selected value will be removed from other 'select' tag. If the user again changes the value in current selected drop down list, I want to add previous selected value in other 'select' tag at its original position.

I am able to do remove part and partially append part.(need to append previous value at it's original position.)

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/

Steely Wing · Answer 1 · 2013-04-14T03:28:02.870

1

Please simplify your question next time, do you want to hide the selected <option> in other <select>?

Hope this help, http://jsfiddle.net/GG3S5/9/

edited Apr 14 '13 at 03:28

answered Apr 07 '13 at 08:37

Steely Wing

16,239
8
58
54

Updated again, this more make sense – Steely Wing Apr 07 '13 at 08:51
Please google it http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery – Steely Wing Apr 13 '13 at 08:04
thank you for the link but that option is not working in safari, it would be really useful if you can edit existing fiddle http://jsfiddle.net/GG3S5/2/ – user2243832 Apr 14 '13 at 02:46

How to remove and append value in drop down list on change event of another drop down list

1 Answers1