如何通過 select 選項更改所有輸入值

Question

如何通過 select 選項更改所有輸入值。 請幫我。

 function getValue(selectObject) { var someValue = selectObject.value; document.getElementById("msn_v").value = someValue; }

 <select class="outofstockselectswitch" onchange="getValue(this)"> <option value="Audi">Audi</option> <option value="BMW">BMW</option> <option value="Mercedes">Mercedes</option> <option value="Volvo">Volvo</option> </select> <form> <input id="msn_v" name="p_name" > <input id="msn_v" name="p_name" > <input id="msn_v" name="p_name" > <input id="msn_v" name="p_name" > </form>

**此代碼僅適用於第一次輸入。 但我需要更改所有輸入值。 **

Answer 1

HTML 中的 id 屬性是唯一的。 您應該使用 class，然后使用 document.getElementsByClassName，您可以設置輸入。

 function getValue(selectObject) { var someValue = selectObject.value; var inputs = document.getElementsByClassName("msn_v"); for(let i=0;i<inputs.length;i++){ inputs[i].value = someValue; } }

 <select class="outofstockselectswitch" onchange="getValue(this)"> <option value="Audi">Audi</option> <option value="BMW">BMW</option> <option value="Mercedes">Mercedes</option> <option value="Volvo">Volvo</option> </select> <form> <input class="msn_v" name="p_name" > <input class="msn_v" name="p_name" > <input class="msn_v" name="p_name" > <input class="msn_v" name="p_name" > </form>

Answer 2

 const v_brand = document.querySelector("#v_brand"); const p_names = document.querySelectorAll("input[name='p_name']"); const p_names_updater = () => p_names.forEach(input => input.value = v_brand.value); v_brand.addEventListener("change", p_names_updater); p_names_updater();

 <select id="v_brand"> <option value="Audi">Audi</option> <option value="BMW">BMW</option> <option value="Mercedes">Mercedes</option> <option value="Volvo">Volvo</option> </select> <form> <input name="p_name"> <input name="p_name"> <input name="p_name"> <input name="p_name"> </form>

Answer 3

改變這個：

document.getElementById("msn_v").value = someValue;

對此：

[...document.querySelectorAll('[name=p_name]')].forEach(elem => elem.value = someValue);