javascript - JavaScript の別のドロップダウンに基づいて新しいドロップダウンを作成する

Question

これが私の要件です。

リスト項目

1. 私はいくつかのドロップダウンAとBを持っています
2. JavaScript のキー値変数を作成しました。

3. var keyvalue={"key1":["value1","value2"],"key2":["value2","value4"]}

4. ドロップダウン A にキーを入力しています。このドロップダウンを選択すると、対応する値 (keyvalue 変数から) がドロップダウン B に入力されます。

を使用したサンプルコードは次のとおりです。

問題は、ドロップダウン A で別のオプションを選択しても、対応する古いオプションが新しいドロップダウンに存在することです。つまり、新しいドロップダウンを作成するのではなく、新しい値が追加されます。

Answer 1

設定する前に、すべてのオプションを削除する必要があります。var quantityこれをステートメントの直後に追加します。

while (selectvalue.options.length > 0) {
    selectvalue.remove();
}

---

また、@ francisco-presencia が述べたようonchangeに、HTML 内の をなくし、代わりにスクリプト内でイベント リスナーを使用する必要があります。

Answer 2

関心の分離ルートに進むことをお勧めします。これは、onclick=""イベントを削除し、代わりに次のことを行うことを意味します。

$('#key').change(function(){
  $('#value').remove();
  // Do the rest of the logic of retrievevalue() here.
  });

Answer 3

empty()新しいオプションを追加する前に、古いオプションを削除するために使用する必要があります。

私のサンプル Fiddle でそれを見ることができます:

ここでJSフィドル

$('#select2').empty().append(Weapons);