如何通过 select 选项更改所有输入值

Question

How to change all input value by select an option. Please help me.

 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>

**This code is working for first inputs only. But i need to change all input value. **

Answer 1

id attribute in HTML is unique. You should rather use class, then using document.getElementsByClassName, you can set the inputs.

 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

Change this:

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

To this:

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