使用不带jquery的javascript从多个不同的选定下拉列表项中获取值

<!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>