Question

好吧所以我有两个下拉菜单我希望下拉列表中的所选项目隐藏在下拉列表中，反之亦然。

到目前为止，我已经完成了以下工作似乎无法弄清楚最后一步是希望能有所帮助。

我目前拥有的是两个附加到下拉列表的列表，这些列表循环并将值附加到下拉列表，然后我检查更改事件，当发生这种情况时，我从基于下拉列表中删除值在其指数上。

我目前正在删除selectedIndex，我想删除selectValue而不是索引，但是也无法理解。

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

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

纯粹是为了完整性来添加undefined已经有效的答案。

要解决相反的问题以及重新添加这些值的扩展问题，包括自动选择上一个值（如果存在），请参阅：DEMO

请参阅下文，了解我对原始脚本所做的更改。

我确信下面的代码可以在几个级别上进行优化，但我只是尝试让它先工作。让它漂亮我留给你:)）

首先，我重新考虑了您的代码，以便将值附加到各自的方法中。现在，在重新添加值之前，下拉列表已完全清除。

首先，我们记录当前所选选项的值，以确保我们可以重新选择它（如果存在）。为其添加更加动态的感觉并保存用户表单手动重新选择。

请参阅将值附加到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;
    }
};

我还重新考虑了代码，该代码删除了另一个下拉列表中的值，调用新的重新分解的方法在删除特定值之前首先重新附加所有值。这样可以确保在一段时间之后不会出现空的下拉列表。

请参阅前往下拉列表的change事件示例：
（取自 undefined的答案，仅添加了重新填充的调用）

$('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();
    }
})

有关完整的代码更改，请检查链接的DEMO

编辑（2012年6月25日）
更新了代码，因为我发现了一个不一致的情况，即如果进行了默认选择（索引0），则货币没有正确重新设置。此代码的最新版本现在可以正确地重新绑定货币。

Answer 2

尝试这个，而不是使用onChange属性，你可以使用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/

如果在第二个下拉列表中选中，则jquery下拉列表隐藏值

2 个答案: