Add value to html in javascript function

Question

I have a code like this:

<label>Brand</label></br>
<select name="brand" id="brand" onChange="changecat(this.value);">
    <option value="" selected>Select Brand</option>
    <option value="A">AMD</option>
    <option value="B">Intel</option>
</select></br></br>

<label>Socket</label></br>
<select name="category" id="category" onchange="showProcessor()">
    <option value="" disabled selected>Select Socket</option>
</select>

var brandByCategory = {
  A: ["AM4", "AM3", "AM2"],
  B: ["LGA 1151", "LGA 1151v2", "LGA 1150"]
}

function changecat(value) {
  if (value.length == 0)
    document.getElementById("category").innerHTML = "<option>Select Socket</option>";
  else {
    var catOptions = "";
    for (categoryId in brandByCategory[value]) {
      catOptions += "<option>" + brandByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
  }
}

If the brand option is selected, then it will populate the socket drop-down, and it works, but the socket drop-down option doesn't have a value, i have to give a value to it, because i wanna fetch a data from the database which needs the value of the brand. How to add value in the second drop-down?

i tried to add key pair values, add string in the between <option> but it doesnt work @AmanjotKaur — Dean TristaNato
– Dean TristaNato, Commented Oct 23, 2019 at 6:26

Raju · Accepted Answer · 2019-10-23 06:43:48Z

1

var brandByCategory = {
    A: ["AM4", "AM3", "AM2"],
    B: ["LGA 1151", "LGA 1151v2", "LGA 1150"]
}

function changecat(value) {
    if (value.length == 0) {
        document.getElementById("category").innerHTML = "<option>Select Socket</option>";
    } else {
        var catOptions = "";
        for(categoryId in brandByCategory[value]){
            catOptions += `<option value="${brandByCategory[value][categoryId]}">${brandByCategory[value][categoryId]}</option>`;
                }
            console.log(catOptions)
            document.getElementById("category").innerHTML = catOptions;
        }
    }
changecat('A')

edited Oct 23, 2019 at 6:43

answered Oct 23, 2019 at 6:26

Raju

861 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dean TristaNato Over a year ago

still, it doesnt have a value in it

Raju Over a year ago

there was a small mistake I have corrected it it's working now

Amit · Accepted Answer · 2019-10-23 08:09:24Z

1

If you want to add option based on your given array. Then you can follow the below approach.

var brandByCategory = {
    A: ["AM4", "AM3", "AM2"],
    B: ["LGA 1151", "LGA 1151v2", "LGA 1150"]
}

function changecat() {
    let selectedVal = document.getElementById("brand").value;
    var catOptions = "";
    
    for (let i=0; i<brandByCategory[selectedVal].length; i++) {
        let value = brandByCategory[selectedVal][i]; 
        catOptions += "<option value="+value+">" + value + "</option>";

    }
    document.getElementById("category").innerHTML = catOptions;
}

<label>Brand</label></br>
   <select name="brand" id="brand" onChange="changecat();">
      <option value="" selected>Select Brand</option>
      <option value="A">AMD</option>
      <option value="B">Intel</option>
   </select> </br> </br>

<label>Socket</label></br>
   <select name="category" id="category" onchange="showProcessor()">
      <option value="" disabled selected>Select Socket</option>
   </select>

Don't hesitate to let me know if have any confusion/query.

edited Oct 23, 2019 at 8:09

answered Oct 23, 2019 at 6:29

Amit

1,5601 gold badge15 silver badges29 bronze badges

3 Comments

Dean TristaNato Over a year ago

it doesnt work, the select is showing the A and B not the value in it

Amit Over a year ago

did you try to run with code snippet? sorry I didn't get your point, would you please explain little bit?

Dean TristaNato Over a year ago

still it doesnt work, i have found the solution, but thankss

vipul patel · Accepted Answer · 2019-10-23 06:59:26Z

var brandByCategory = {
  A: ["AM4", "AM3", "AM2"],
  B: ["LGA 1151", "LGA 1151v2", "LGA 1150"]
}

function changecat(value) {
   var sel =  document.getElementById("category");
   sel.innerHTML = '';
   var option = document.createElement("option");
   option.text = "select cat";
   sel.add(option);
   for (categoryId in brandByCategory[value]) {
      option = document.createElement("option");
      option.text = brandByCategory[value][categoryId];
      sel.add(option);
  }

}

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
    changecat("A");
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<button  onclick="changecat('A')" type="button"> chnage cat A </button>

<button onclick="changecat('B')">chnage cat B </button>

<div>

<select id="category"/>
</div>

Collectives™ on Stack Overflow

Add value to html in javascript function

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related