更改JavaScript数组值
[英]Changing JavaScript array values
问题描述
I've been following this guide on w3schools to dynamically change the elements of a dropdown select based off another dropdown select , as seen below: 
我一直在w3schools上遵循此指南，以基于另一个下拉选择来动态更改下拉选择的元素，如下所示：
The code to do this is as follows: 执行此操作的代码如下：
<!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>
However, I noticed that for the second dropdown select, the element's values are numbered, and I was wondering how to change those values into text. 但是，我注意到对于第二个下拉选择，该元素的值已编号，并且我想知道如何将这些值更改为文本。
Eg. 例如。 in the linked example the first select is as follows: 在链接的示例中，第一个选择如下：
<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>
And if I set the value of the first select to Volvo, the second select is as follows: 如果将第一个选择的值设置为Volvo，则第二个选择如下：
<select id="carmodel">
<option value="1">V70</option>
<option value="2">XC60</option>
<option value="3">XC90</option>
</select>
What I would like to obtain compared to above: 与以上相比，我想获得什么：
<select id="carmodel">
<option value="V70">V70</option>
<option value="XC60">XC60</option>
<option value="XC90">XC90</option>
</select>
3 个解决方案
解决方案1
2 已采纳 2017-03-03 11:16:49
Replace var car = new Option(cars[i], i) with var car = new Option(cars[i], cars[i]) 用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>
解决方案2
0 2017-03-03 11:18:20
You can do this easily using a PHP/MySQL/Ajax and store them in a database, however if you don't want to use any serverside programming, you can set a data-* global attribute for each of your option tags: data-option="Car model name here" 您可以使用PHP / MySQL / Ajax轻松完成此操作并将其存储在数据库中，但是，如果您不想使用任何服务器端编程，则可以为每个选项标签设置data- *全局属性： data-option="Car model name here"
Read more about "data-*" on W3Schools: https://www.w3schools.com/tags/att_global_data.asp 在W3Schools上了解有关“ data- *”的更多信息： https : //www.w3schools.com/tags/att_global_data.asp
解决方案3
0 2017-03-03 11:23:43
Here are two options for you: 这里有两个选项供您选择：
Change the constructor: 更改构造函数：
var car = new Option(cars[i], cars[i]);
Or 要么
var car = new Option(cars[i]);
car.value = cars[i];
Just after the constructor. 就在构造函数之后。
The problem you are facing is caused by the second argument in the constructor of the Option object, which gives the value of the option element. 您面临的问题是由Option对象的构造函数中的第二个参数引起的，该参数提供了option元素的值。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.