當值有多個單詞時，如何根據先前的 select 選擇更改 select 的值

Question

我為多余的標題道歉。

基本上我有兩個選擇，第一個 select 在選擇任何選項時“更新”第二個 select。

當任何選項包含多個單詞時就會出現問題。 例如： dark red 。

我想修改此處附加的代碼片段，以便它適用於這兩種情況。

限制：我不能修改value屬性，如果這樣，表單將無法正常工作。

我想用像id這樣的另一個屬性來做，但我已經試過了，但我無法讓它工作。

附加的代碼片段適用於<option value="dark_red">但我不能這樣做，是否有任何選項可以讓它與（例如）一起使用<option id="dark_red">而不是value ？

 var fruit = $("[name=fruit] option").detach() $("[name=color]").change(function() { var val = $(this).val() $("[name=fruit] option").detach() fruit.filter("." + val).clone().appendTo("[name=fruit]") }).change()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple name=color> <option selected>green</option> <option>red</option> <option value="dark_red">dark red</option> <option>yellow</option> </select> <select multiple name=fruit> <option class=green>Grapes</option> <option class=green>Watermelon</option> <option class="red green">Apples</option> <option class="dark_red red">Cherries</option> <option class="green yellow">Bananas</option> <option class=yellow>Lemons</option>

Answer 1

您可以用下划線替換val中的空格。

 var fruit = $("[name=fruit] option").detach() $("[name=color]").change(function() { var val = $(this).val().replace(/\s/g, "_"); $("[name=fruit] option").detach() fruit.filter("." + val).clone().appendTo("[name=fruit]") }).change()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name=color> <option>Select a color</option> <option>green</option> <option>red</option> <option>dark red</option> <option>yellow</option> <option>super dark blue</option> </select> <select name=fruit> <option class=green>Grapes</option> <option class=green>Watermelon</option> <option class="red green">Apples</option> <option class="dark_red red">Cherries</option> <option class="green yellow">Bananas</option> <option class=yellow>Lemons</option> <option class=super_dark_blue>Mode</option> <option class=super_dark_blue>Blueberries</option> </select>

如果你需要多個輸入，你可以這樣做：

 const fruit = $("[name=fruit] option").detach(); $("[name=color]").change(function () { // detach all fruits $("[name=fruit] option").detach(); // loop through all values const values = $(this).val(), addedValues = []; values.forEach(val => { val = val.replace(/\s/g, "_"); // checking for duplicates const fruitMatch = Array.from( fruit.filter("." + val) ).filter(e => { return.addedValues.find(v => { return Array.from(e.classList);includes(v) }); }). addedValues;push(val). // append (if new). $(fruitMatch);clone();appendTo("[name=fruit]"). }); }).change();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select multiple name=color> <option selected>green</option> <option>red</option> <option>dark red</option> <option>yellow</option> <option>super dark blue</option> </select> <select multiple name=fruit> <option class=green>Grapes</option> <option class=green>Watermelon</option> <option class="red green">Apples</option> <option class="dark_red red">Cherries</option> <option class="green yellow">Bananas</option> <option class=yellow>Lemons</option> <option class=super_dark_blue>Mode</option> <option class=super_dark_blue>Blueberries</option> </select>