0

<select>最初に同様のオプションを持つ2つのボックスがあります。

ユーザーがオプションXを選択すると<select id="first">、同じオプションから削除する必要が<select id="second">あり、その逆も同様です。

jQuery のようなフレームワークを追加せずに、JavaScript で解決することをお勧めします。現在、次の解決策があります。

/* first  - the first check-box
   second - the second check-box */

$('#first').bind('change', function () {
    $('option:not(:selected)', this).clone().appendTo($('#second').empty());
});

$('#second').bind('change', function () {
    $('option:not(:selected)', this).clone().appendTo($('#first').empty());
});

ただし、次の問題があります。両方の選択ボックスに 10 個のオプションがあるとします。で1つを選択した後、#firstで9つのオプションを取得します#second。9 つの項目から 1 つを選択すると#second、最初に選択した項目が で削除され#first、8 つの項目しかありません#first。この手順を繰り返して、空<select>のオプションと 1 つのオプションのみで終了することができます。

元のオプションを常に節約できる一時オブジェクトの種類について考えました。

それを修正する方法はありますか？

4

1 に答える 1

0

次のように、必要に応じてオプションを表示および非表示にできるはずです。

$('#first').bind('change', function () {
        $("#second option").show();
        $("#second option[value='" + $(this).find('option:selected').attr('value') +"']").hide();
  });

これは、ブラウザー間で一貫性を持たせたい場合、バニラ JavaScript を使用する方が jQuery の方がはるかに簡単であるものの 1 つです。

于 2013-10-16T08:45:23.080 に答える