Changing JavaScript array values
Question
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:
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:
<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 answers
solution1
2 ACCPTED 2017-03-03 11:16:49
Replace var car = new Option(cars[i], i) with 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>
solution2
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"
Read more about "data-*" on W3Schools: https://www.w3schools.com/tags/att_global_data.asp
solution3
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.