Question

Okay so I have two drop downs I want the selected item in dropdown one to be hidden in dropdown two and vice versa.

I have done the following so far can’t seem to figure out the final step was hoping for a hand.

What I have currently is I have two lists that append to the dropdowns from and to, these list are looped over and append values to the dropdownlists, I then check for change event and when this occurs I remove values from a dropdown based on its index.

I am currently removing on selectedIndex, I want to remove on selectedValue rather then index but could not grasp that either.

<script type="text/javascript">

    var fromCurrencies = {

        FRO : 'Convert this currency',
        AUD : 'AUD, Australian Dollar',
        NZD : 'NZD, New Zealand Dollar',
        EUR : 'EUR, Euro',
        USD : 'USD, United States Dollar',
    };

    var toCurrencies = {
        TOC : 'To this currency',
        AUD : 'AUD, Australian Dollar',
        NZD : 'NZD, New Zealand Dollar',
        EUR : 'EUR, Euro',
        USD : 'USD, United States Dollar',
    };

    $(document).ready(function () {

        var ddFrom = $(".ddConvertFrom");
        $.each(fromCurrencies, function (val, text) {
            ddFrom.append(
                $('<option></option>').val(val).html(text)
            );
        }); /*End ddFrom loop*/

        var ddTo = $(".ddConvertTo");
        $.each(toCurrencies, function (val, text) {
            ddTo.append(
                $('<option></option>').val(val).html(text)
            );
        }); /*End ddTo loop*/


    }); /*End document.ready function*/

    function doAction(){

        if ($('.ddConvertFrom').val == "" || $('.ddConvertFrom').get(0).selectedIndex == 0) {
            //Do nothing or hide...?
        } else {
            /*Hide selected value from other dropdown*/
            var index = $('.ddConvertFrom').get(0).selectedIndex;
            $('.ddConvertTo option:eq(' + index + ')').remove();
        }

    }

</script>

The html:

<div class="selectstyler">
    <asp:DropDownList ID="ddConvertFrom" OnChange="doAction()" CssClass="ddConvertFrom" runat="server"></asp:DropDownList>
</div>

<div class="selectstyler">
    <asp:DropDownList ID="ddConvertTo" CssClass="ddConvertTo" runat="server"></asp:DropDownList>
</div>

Answer 1

try this and instead of using onChange attribute you can use change event handler.

$('select:first').change(function(){
            /*remove selected value from other dropdown*/
            var txt = $(this).val();
            $('.ddConvertTo option[value=' + txt + ']').remove();
 })

http://jsfiddle.net/ue4Cm/1/