更改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數組值

回答

相關問題