Question

我一直关注此guide on w3schools to dynamically change the elements of a dropdown select based off another dropdown select，如下所示：

执行此操作的代码如下：

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

但是，我注意到，对于第二个下拉选择，元素的值已编号，我想知道如何将这些值更改为文本。

EG。在链接示例中，第一个选择如下：

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

Answer 1

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

Answer 2

您可以使用PHP / MySQL / Ajax轻松完成此操作并将其存储在数据库中，但是如果您不想使用任何服务器端编程，则可以为每个选项标签设置data- * global属性： data-option="Car model name here"

详细了解W3Schools上的“data- *”：https://www.w3schools.com/tags/att_global_data.asp

Answer 3

以下是两个选项：

更改构造函数：

public void setCurrentItem (int item, boolean smoothScroll) {
    mViewPager.setCurrentItem(item, smoothScroll);
}

或

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

在构造函数之后。

您遇到的问题是由var car = new Option(cars[i]); car.value = cars[i];对象的构造函数中的第二个参数引起的，该参数给出了option元素的值。

更改JavaScript数组值

3 个答案: