如何使用JavaScript将名称属性分配给动态选择选项

Question

在下面的this link示例中，我希望通过选择或更改汽车型号选项来将汽车型号设置为名称属性。目前，它给出的汽车名称作为第二个选择选项(carmodel)的值

​

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);
    }
  }
}

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

​

它插入带有名称的汽车型号的索引号，而不是汽车型号name.with var_dump($_POST['model']);其给定的string(1) "1"

Answer 1

name不是option的有效属性，因此您无法添加它。不过，您也可以使用data-name：

car.dataset.name = cars[i];

​

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);
     car.dataset.name = cars[i]; // <- add the data-name here
      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>

​