Necesito escribir un código donde necesito completar un menú desplegable 1 de la tabla mysql en función de la selección de otro menú desplegable que también necesita dar valores del menú desplegable como valor numérico como identificación del elemento de la tabla mysql, pero script.js no acepta ninguno valor numérico. Soy bastante nuevo en este concepto, ayúdame a resolver este problema, gracias

PARTE HTML

 <div> <select class="custom-select" style="width: 150px;" id="dropdown1" onchange="onChange()"> <option selected disabled>Select Role </option> <?php enter code here $sql = "SELECT * FROM category"; $result = $conn->query($sql); //Populate dropdown2 from onChange event of dropdown1 if ($result->num_rows > 0){ // output data of each row while($row = $result->fetch_assoc()){ echo "<option class='dropdown-item' value='".$row["id"]."'>".$row["name"]."</option>"; } } else{ echo "Sorry No Role Availabe for Now"; } $conn->close(); ?> </select><br/> <span id="choosen"></span> </div>

PARTE JS

 <script> function onChange(){ var idforquery =document.getElementById('dropdown').value; document.getElementById("choosen").innerHTML=" // Here we generate another dropdown of behalf of selected dropdown option <div> <select class="custom-select" style="width: 150px;" id="dropdown1"> <option selected disabled>Select Role </option> <?php $sql2 = "SELECT * FROM sub_category WHERE cat_id =idforquery;"; $result = $conn->query($sql2); if ($result->num_rows > 0){ // output data of each row while($row = $result->fetch_assoc()){ echo "<option class='dropdown-item' value='".$row["id"]."'>".$row["name"]."</option>"; } } else{ echo "Sorry No Role Availabe for Now"; } $conn->close(); ?> </select><br/> <span id="choosen1"></span> </div>"; } </script>