CODEWITHSUNDEEP
javascriptjquery
lipon
lipon

Reputation: 11

How to assign name attribute to dynamic select options with JavaScript

From the following example in this link I want to set car model as a name attribute by selecting or changing car model options. currently its giving car name as value for the second select option (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>

its inserting car model's index number with name instead of car model name.with var_dump($_POST['model']); its giving string(1) "1"

Upvotes: 2

Views: 647

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

name isn't a valid attribute of an option so you cannot add it. You could use data-name instead though: 

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>

Upvotes: 2

Related Questions