javascript - jquery dropdownlist hide value if selected in second dropdown - Stack Overflow

admin管理员组

文章数量:1405896

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>

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>

• javascript
• jquery
• asp
• drop-down-menu

Share Follow edited Jun 11, 2012 at 21:41 Anicho asked Jun 11, 2012 at 21:32 AnichoAnicho 2,6671111 gold badges4848 silver badges7676 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Purely for pleteness to add to an already working answer from undefined.

To address the vice versa and the extended issue of re-adding those values including auto-selecting the previous value if it exists see: DEMO

See below for the changes I made to your original scripts.

I'm sure the code below can be optimised on several levels but I only tried to get it working first. Making it pretty I leave to you :)

To start I re-factored your code so the values are attached in their respective methods. The dropdowns are now fully cleared before the values are re-added.

First though we record the value of the currently selected option to ensure we can re-select it if it exists. Adds a more dynamic feel to it and saves the user form re-selecting manually.

See example of attaching values to the from-dropdown:

function attachFromValues() {
    var ddFrom = $(".ddConvertFrom");
    var selectedValue = ddFrom.val();
    var selectedIndex = 0;

    ddFrom.html("");
    var index = 0;
    $.each(fromCurrencies, function(val, text) {
        ddFrom.append(
        $('<option></option>').val(val).text(text));

        if (selectedValue == val) {
            selectedIndex = index;
        }

        index++;
    }); /*End ddFrom loop*/

    if (selectedIndex > 0) {
        ddFrom.get(0).selectedIndex = selectedIndex;
    }
};

I also re-factored the code which removes the value in the other dropdown calling the new re-factored methods to re-attach all values first before removing the specific value. That makes sure you do not end up with an empty dropdown after while.

See example of the change event of the to-dropdown:
(taken from undefined's answer, only added call to re-populate)

$('select.ddConvertTo').change(function() {
    if ($('.ddConvertTo').val == "") {
        //Do nothing or hide...?
    } else { /*Hide selected value from other dropdown*/
        attachFromValues();
        var txt = $(this).val();
        $('.ddConvertFrom option[value=' + txt + ']').remove();
    }
})

For the plete code changes check the linked DEMO

Edit (25-Jun-2012)
Updated code as I noticed an inconsistency whereby the currencies did not re-set correctly if the default selection (index 0) was made. The latest version of this code now re-binds the currencies correctly.

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/ue4Cm/1/

本文标签： javascriptjquery dropdownlist hide value if selected in second dropdownStack Overflow