2

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

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

我目前拥有的是我有两个列表追加到下拉列表中，这些列表循环并将值追加到下拉列表中，然后我检查更改事件，当发生这种情况时，我根据其索引从下拉列表中删除值.

我目前正在删除 selectedIndex，我想删除 selectedValue 而不是索引，但也无法掌握。

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

2 回答 2

3

纯粹是为了完整性，以添加到来自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请参阅to-dropdown 事件的示例：（
取自 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），货币没有正确重新设置不一致。此代码的最新版本现在可以正确地重新绑定货币。

于 2012-06-11T22:35:05.897 回答
2

试试这个，而不是使用 onChange 属性，您可以使用更改事件处理程序。

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

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

于 2012-06-11T21:50:33.303 回答