2

わかりましたので、ドロップダウンが 2 つあります。ドロップダウン 1 で選択したアイテムをドロップダウン 2 で非表示にし、その逆も同様です。

私はこれまでに次のことを行ってきましたが、最後のステップがハンドを望んでいたかどうかわかりません。

私が現在持っているのは、ドロップダウンに追加する2つのリストがあります。これらのリストはループされ、ドロップダウンリストに値を追加します。次に、変更イベントをチェックし、これが発生すると、インデックスに基づいてドロップダウンから値を削除します.

現在、selectedIndex を削除しています。index ではなく 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;
    }
};

また、特定の値を削除する前に、最初にすべての値を再アタッチするために、新しいリファクタリングされたメソッドを呼び出して、他のドロップダウンの値を削除するコードをリファクタリングしました。これにより、しばらくしてからドロップダウンが空になることはありません。

changeto-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 に答える