当值有多个单词时，如何根据先前的 select 选择更改 select 的值

Question

I apologize for the redundant title.

Basically I have two selects, the first select 'updates' the second select when any option is selected.

The problem comes when any of the options contains more than one word. For example: dark red .

I would like to modify the snippet attached here so that it works for both cases.

Restrictions: I cannot modify the value attribute, if so, the form will not work properly.

I would like to do it with another attribute like id but I have tried and I couldn't make it work.

The attached snippet works with <option value="dark_red"> but I can not do that, is there any option to make it work with (for example) <option id="dark_red"> instead of 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

You can replace spaces in the val with an underscore.

 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>

If you need multiple inputs, you can do something like this:

 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>