更改JavaScript數組值

Question

我一直在w3schools上遵循此指南，以基於另一個下拉選擇來動態更改下拉選擇的元素，如下所示：

執行此操作的代碼如下：

<!DOCTYPE html>
<html>
<body>   

<select id="car" onchange="ChangeCarList()"> 
  <option value="">-- Car --</option> 
  <option value="VO">Volvo</option> 
  <option value="VW">Volkswagen</option> 
  <option value="BMW">BMW</option> 
</select> 

<select id="carmodel"></select> 

<script>
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;
    while (modelList.options.length) {
        modelList.remove(0);
    }
    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
} 
</script>

</body>
</html>

但是，我注意到對於第二個下拉選擇，該元素的值已編號，並且我想知道如何將這些值更改為文本。

例如。 在鏈接的示例中，第一個選擇如下：

<select id="car" onchange="ChangeCarList()"> 
  <option value="">-- Car --</option> 
  <option value="VO">Volvo</option> 
  <option value="VW">Volkswagen</option> 
  <option value="BMW">BMW</option> 
</select>

如果將第一個選擇的值設置為Volvo，則第二個選擇如下：

<select id="carmodel"> 
  <option value="1">V70</option> 
  <option value="2">XC60</option> 
  <option value="3">XC90</option> 
</select>

與以上相比，我想獲得什么：

<select id="carmodel"> 
  <option value="V70">V70</option> 
  <option value="XC60">XC60</option> 
  <option value="XC90">XC90</option> 
</select>

Answer 1

用var car = new Option(cars[i], i)替換var car = new Option(cars[i], cars[i])

演示：

 var carsAndModels = {}; carsAndModels['VO'] = ['V70', 'XC60', 'XC90']; carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg']; carsAndModels['BMW'] = ['M6', 'X5', 'Z3']; function ChangeCarList() { var carList = document.getElementById("car"); var modelList = document.getElementById("carmodel"); var selCar = carList.options[carList.selectedIndex].value; while (modelList.options.length) { modelList.remove(0); } var cars = carsAndModels[selCar]; if (cars) { var i; for (i = 0; i < cars.length; i++) { var car = new Option(cars[i], cars[i]); modelList.options.add(car); } } }

 <select id="car" onchange="ChangeCarList()"> <option value="">-- Car --</option> <option value="VO">Volvo</option> <option value="VW">Volkswagen</option> <option value="BMW">BMW</option> </select> <select id="carmodel"></select>

Answer 2

您可以使用PHP / MySQL / Ajax輕松完成此操作並將其存儲在數據庫中，但是，如果您不想使用任何服務器端編程，則可以為每個選項標簽設置data- *全局屬性： data-option="Car model name here"

在W3Schools上了解有關“ data- *”的更多信息： https : //www.w3schools.com/tags/att_global_data.asp

Answer 3

這里有兩個選項供您選擇：

更改構造函數：

var car = new Option(cars[i], cars[i]);

要么

var car = new Option(cars[i]);
car.value = cars[i];

就在構造函數之后。

您面臨的問題是由Option對象的構造函數中的第二個參數引起的，該參數提供了option元素的值。

更改JavaScript數組值

問題描述

3 個解決方案

解決方案1
2 已采納 2017-03-03 11:16:49

解決方案2
0 2017-03-03 11:18:20

解決方案3
0 2017-03-03 11:23:43

更改JavaScript數組值

問題描述

3 個解決方案

解決方案1 2 已采納 2017-03-03 11:16:49

解決方案2 0 2017-03-03 11:18:20

解決方案3 0 2017-03-03 11:23:43

解決方案1
2 已采納 2017-03-03 11:16:49

解決方案2
0 2017-03-03 11:18:20

解決方案3
0 2017-03-03 11:23:43