更改JavaScript数组值

-1

我一直在关注这个guide on w3schools to dynamically change the elements of a dropdown select based off another dropdown select，如下所示：更改JavaScript数组值

要做到这一点的代码如下：

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

如果我设置的值先选择沃尔沃，第二选择如下：

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

来源

2017-03-03 mistaq

ChangeCarList函数在哪里？ – baao

请添加更多详情 –

@baao它在演示链接。 – mistaq

替换var car = new Option(cars[i], i)与var car = new Option(cars[i], cars[i])

DEMO：

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>

来源

2017-03-03 11:16:49

这工作，谢谢。 – mistaq

将其标记为正确，以便其他人也可以使用 –

顺便说一句，你如何在帖子中实现这样的演示？这似乎相当有用。 – mistaq

你可以做到这一点很容易使用的PHP/MySQL/Ajax和它们存储在数据库中，但是如果你不希望使用任何服务器端编程， data-option="Car model name here"

了解更多关于W3Schools的“数据 - *”：你可以为每个选项标签设置一个数据 - *全局属性https://www.w3schools.com/tags/att_global_data.asp

来源

2017-03-03 11:18:20 Khalid

这里有两个选项：

变化的构造：

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

或者

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

就在构造函数之后。

您面临的问题是由Option对象的构造函数中的第二个参数引起的，该对象提供了选项元素的值。

来源

2017-03-03 11:23:43

更改JavaScript数组值

回答

相关问题