我希望能够从两个不同的下拉列表中选择多个值，并使用输出值来调用单独的函数。我可以独立获取每个值，但希望有一个可以同时获取两个值的函数
<!DOCTYPE html>
<html>
<body>
<select id ="cars1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select id ="cars2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
//select the value from the dropdown table with id ="cars1"
var selectCars1 = document.getElementById("cars1");
selectCars1.onchange = function start(){
var Cars1Value = selectCars1.options[selectCars1.selectedIndex].value;
alert(Cars1Value);
}
//select the value from the dropdown table with id ="cars2"
var selectCars2 = document.getElementById("cars2");
selectCars2.onchange = function(){
var Cars2Value = selectCars2.options[selectCars2.selectedIndex].value;
alert(Cars2Value);
}
</script>
</body>
</html>
有多种方法可以执行此操作，但是一种方法是将值存储在函数外部，以便可以在其他函数中使用它们。
请参阅内联注释，以获取对代码的其他修改：
<!DOCTYPE html>
<html>
<body>
<select id ="cars1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select id ="cars2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
// Set up your variables outside of each function so that you can use them outside of the functions
var selectCars1 = document.getElementById("cars1");
var selectCars2 = document.getElementById("cars2");
var cars1Value = "";
var cars2Value = "";
// Don't use .onXys properties. Use .addEventListener
selectCars1.addEventListener("change", getValues);
selectCars2.addEventListener("change", getValues);
function getValues(){
cars1Value = selectCars1.value; // Just get the value, no need to pass index
cars2Value = selectCars2.value; // Just get the value, no need to pass index
doOtherWork();
}
function doOtherWork(){
alert(cars1Value + " " + cars2Value);
}
</script>
</body>
</html>另一种避免在更高范围内设置变量的方法是将值直接传递给要使用它们的另一个函数：
<!DOCTYPE html>
<html>
<body>
<select id ="cars1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select id ="cars2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
// Set up your variables outside of each function so that you can use them outside of the functions
var selectCars1 = document.getElementById("cars1");
var selectCars2 = document.getElementById("cars2");
// Don't use .onXys properties. Use .addEventListener
selectCars1.addEventListener("change", getValues);
selectCars2.addEventListener("change", getValues);
function getValues(){
// Do whatever here, but when done, pass both values to other function:
doOtherWork(selectCars1.value, selectCars2.value);
}
function doOtherWork(val1, val2){
alert(val1 + " " + val2);
}
</script>
</body>
</html>