如何同时从两个输入更新 2 个变量？

Question

I can't get them to output both the selections at the same time. Is this possible? One side is always undefined. I have tried so many things, but when I console.log I just cannot get them to log at the same time. I would like the default values to be "all", and then either side would update depending on what is clicked.

 function combo(a, b) { a = a.value b = b.value console.log(a, b) }

 <label for="food">Please select a food: </label> <select id="food" onchange="combo(this,'all')"> <option value="100">Select</option> <option value="all">All</option> <option value="cheese">cheese</option> <option value="pickle" pickle</option> </select> <label for="sort">Please sort: </label> <select id="sort" onchange="combo('all',this)"> <option value="100">Select</option> <option value="smell">smell</option> <option value="texture">texture</option> </select>

Answer 1

Consider getting the values explicitly instead of trying to go through a onchange attribute handler.

 const foodSelect = document.getElementById("food"); const sortSelect = document.getElementById("sort"); function selectHandler() { const food = foodSelect.value; const sort = sortSelect.value; console.log(`Food: ${food} | Sort: ${sort}`); } foodSelect.addEventListener("change", selectHandler); sortSelect.addEventListener("change", selectHandler);

 <label for="food">Please select a food: </label> <select id="food"> <option value="100">Select</option> <option value="all">All</option> <option value="cheese">cheese</option> <option value="pickle" pickle</option> </select> <label for="sort">Please sort: </label> <select id="sort"> <option value="100">Select</option> <option value="smell">smell</option> <option value="texture">texture</option> </select>

Answer 2

Another way to do it, less lines.

 function combo() { let food = document.getElementById("food"); let sort = document.getElementById("sort"); console.log(food.options[food.selectedIndex].text + ', ' + sort.options[sort.selectedIndex].text); }

 <label for="food">Please select a food: </label> <select id="food" onchange="combo()"> <option value="100">Select</option> <option value="all">All</option> <option value="cheese">cheese</option> <option value="pickle"> pickle</option> </select> <label for="sort">Please sort: </label> <select id="sort" onchange="combo()"> <option value="100">Select</option> <option value="smell">smell</option> <option value="texture">texture</option> </select>