1

I have a HTML 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">
     <option value="" disabled selected>Select Socket</option>
   </select> </br></br>

<label>Select Processor</label>
   <select id="proSelect" onchange="proSelectValue()">
     <option value="0">Processor</option>
   </select>

and the JS like this

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

I want to populate the third dropdown (Processor Dropdown) with the data from the database. What is the effecient way to do that? But, when I look at the inspect element on the browser, the socket dropdown option doesn't have a value, is that a problem? Thankss

Dean TristaNato
  • 123
  • 8
  • Assuming you don't want to reload the page, you'll need to do some sort of AJAX call to the server to populate the Processor dropdown based on the values in the previous dropdowns. This will require having a server-side script (e.g. PHP) which can respond with the right data which your Javascript would parse and use to fill in Processor. Alternately, preload everything in a giant JS array and parse it via JS. – kmoser Oct 23 '19 at 00:50

1 Answers1

1

In order to update Processor dropdown, Socket dropdown will not cause any problem.

Check below link which has resolved this kind of question.

JavaScript - populate drop down list with array

Fraddy
  • 331
  • 1
  • 8