Tengo un código como este:

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

Si se selecciona la opción marca , se completará el menú desplegable del zócalo y funciona, pero la opción desplegable del zócalo no tiene un valor, tengo que darle un valor , porque quiero obtener datos de la base de datos que necesitan el valor de la marca . ¿Cómo agregar valor en el segundo menú desplegable?

0
Dean TristaNato 23 oct. 2019 a las 09:19

3 respuestas

La mejor respuesta
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')
1
Raju 23 oct. 2019 a las 06:43

Si desea agregar una opción basada en su matriz dada. Entonces puede seguir el siguiente enfoque.

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>

No dude en avisarme si tiene alguna confusión / consulta.

1
Amit 23 oct. 2019 a las 08:09
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>
0
vipul patel 23 oct. 2019 a las 06:59