CODEWITHSUNDEEP
javascripthtmldrop-down-menu
jenik2205
jenik2205

Reputation: 475

How to add value attribute to option element from array in javascript?

I have two drop down lists, second is dependent on the first one. What I don´t know is how add different value to node.value (value of option element).

EDIT: At this moment I have same value in textContent and in value of html option element but I need to add different value from textContent. e.g. Inhabitants

var moduly = [];
moduly['1'] = ["Inhabitants", "Married"];
moduly['2'] = ["German", "French", "English"];
moduly['3'] = ["Houses", "Estates"];
moduly['4'] = ["Surface area", "Meadow area"];

document.querySelector("select[name='modulSelect']").addEventListener("change", function() {
  var element = moduly[this.value.toString().toLowerCase()];
  var elementvalue = mvalue[this.value.toString().toLowerCase()];
  if (element) {
    var select = document.querySelector("select[name='itemSelect']").cloneNode();
    var node = document.createElement("option");
    node.value = 0;
    node.setAttribute("disabled", true);
    node.setAttribute("selected", true);
    node.textContent = "Choose module";
    select.appendChild(node);
    moduly[this.value.toString().toLowerCase()].forEach(function(element) {
      var node = document.createElement("option");
      node.value = element;
      node.textContent = element;
      select.appendChild(node);
    });
    document.querySelector("select[name='itemSelect']").parentElement.replaceChild(select, document.querySelector("select[name='itemSelect']"));
  }
}, false);
<form>
  <select id="modulSelect" name="modulSelect">
    <option value="1">Demographics</option>
    <option value="2">Nation</option>
    <option value="3">Property</option>
    <option value="4">Area</option>
  </select>
</form>

Upvotes: 2

Views: 324

Answers (1)

biberman
biberman

Reputation: 5767

You are using a var that isn't defined, which throws an error:

var elementvalue = mvalue[this.value.toString().toLowerCase()];

Because the var elementvalue is also not used, you can comment that line out or delete it. Furthermore you try to clone a select element with the name itemSelect which doesn't exist in this example code. The following line is missing:

<select id="itemSelect" name="itemSelect"></select>

Fix both errors and yout code should work as expected.

Working example: (i added a disabled option like in the second select so that you can select the first option "Demographics" and renamed the second disabled option from "Choose modul" to "Choose item" so that you can differentiate between both)

var moduly = [];
moduly['1'] = ["Inhabitants", "Married"];
moduly['2'] = ["German", "French", "English"];
moduly['3'] = ["Houses", "Estates"];
moduly['4'] = ["Surface area", "Meadow area"];

document.querySelector("select[name='modulSelect']").addEventListener("change", function() {
  var element = moduly[this.value.toString().toLowerCase()];
  //var elementvalue = mvalue[this.value.toString().toLowerCase()];
  if (element) {
    var select = document.querySelector("select[name='itemSelect']").cloneNode();
    var node = document.createElement("option");
    node.value = 0;
    node.setAttribute("disabled", true);
    node.setAttribute("selected", true);
    node.textContent = "Choose item";
    select.appendChild(node);
    moduly[this.value.toString().toLowerCase()].forEach(function(element) {
      var node = document.createElement("option");
      node.value = element;
      node.textContent = element;
      select.appendChild(node);
    });
    document.querySelector("select[name='itemSelect']").parentElement.replaceChild(select, document.querySelector("select[name='itemSelect']"));
  }
}, false);
<form>
  <select id="modulSelect" name="modulSelect">
    <option value="0" disabled selected>Choose module</option>
    <option value="1">Demographics</option>
    <option value="2">Nation</option>
    <option value="3">Property</option>
    <option value="4">Area</option>
  </select>
  
  <select id="itemSelect" name="itemSelect"></select>
</form>

If you want different value/content pairs you can nest your moduly array one step deeper. Change the array for example from:

moduly['3'] = ["Houses", "Estates"];

to

moduly['3'] = [["10", "Houses"], ["11", "Estates"]];

Then you just need to output the data with array notation:

node.value = element[0];
node.textContent = element[1];


var moduly = [];
moduly['1'] = [["5", "Inhabitants"], ["6", "Married"]];
moduly['2'] = [["7", "German"], ["8", "French"], ["9", "English"]];
moduly['3'] = [["10", "Houses"], ["11", "Estates"]];
moduly['4'] = [["12", "Surface area"], ["13", "Meadow area"]];

document.querySelector("select[name='modulSelect']").addEventListener("change", function() {
  var element = moduly[this.value.toString().toLowerCase()];
  //var elementvalue = mvalue[this.value.toString().toLowerCase()];
  if (element) {
    var select = document.querySelector("select[name='itemSelect']").cloneNode();
    var node = document.createElement("option");
    node.value = 0;
    node.setAttribute("disabled", true);
    node.setAttribute("selected", true);
    node.textContent = "Choose item";
    select.appendChild(node);
    moduly[this.value.toString().toLowerCase()].forEach(function(element) {
      var node = document.createElement("option");
      node.value = element[0];
      node.textContent = element[1];
      select.appendChild(node);
    });
    document.querySelector("select[name='itemSelect']").parentElement.replaceChild(select, document.querySelector("select[name='itemSelect']"));
  }
}, false);
<form>
  <select id="modulSelect" name="modulSelect">
    <option value="0" disabled selected>Choose module</option>
    <option value="1">Demographics</option>
    <option value="2">Nation</option>
    <option value="3">Property</option>
    <option value="4">Area</option>
  </select>
  
  <select id="itemSelect" name="itemSelect"></select>
</form>

Upvotes: 1

Related Questions