Existe-t-il un moyen d'obtenir l'ID du deuxième menu déroulant rempli en utilisant javascript?

Question

Je crée un système d'examen en ligne, et j'ai deux menus déroulants. Un menu vérifie le niveau de difficulté, et basé sur la sélection de "Facile", "Moyen" et "Difficile", le deuxième menu affiche les questions associées. Maintenant, j'essaye de récupérer l'identification des questions du deuxième menu déroulant qui est basé sur le premier. Je suis assez nouveau pour Ajax, alors y a-t-il un moyen d'y parvenir? Toute aide serait appréciée. Merci.

<form> 

    <select id="difficulty" name="difficulty" onchange="changeType();"> 
    <option value="">Select a difficulty level</option> 
    <option value="E" >Easy</option> 
    <option value="M">Medium</option> 
    <option value="H">Hard</option> 
    </select> 


    <select name="questions" onchange="showQuestion(this.id)> 
    <option id="">Select a question</option> 
    <option id="1" onclick="showQuestion(this.id)">Question1</button> 
    <option id="2" onclick="showQuestion(this.id)">Question2</button> 
    <option id="3"></option> 
    <option id="4"></option> 
    <option id="5"></option> 
    <option id="6"></option> 
    </select> 


</form> 

<script> 


    var data = 
      [ 
       { 
        name: "E", 
        options: ["Question1", "Question2"] 
       }, 

       { 
        name: "M", 
        options: ["Question3", "Question4"] 
       }, 

       { 
        name: "H", 
        options: ["Question5", "Question6"] 
       } 
      ]; 


      function changeType() 
      { 
       var i, optionSelected, str, j, optionE1Two; 

       //get currently selected first option 
       optionSelected = document.getElementById("difficulty").value; 

       i = 0; 
       while (i < data.length && data[i].name != optionSelected) 
       { 
        i++; 
       } 

       //populate second menu 
       if(i < data.length) 
       { 
        str = ''; 
        for(j=0; j<data[i].options.length; j++) 
        { 
         str += '<option value = "'+data[i].options[j]+'">'+data[i].options[j]+'</option>'; 
        } 

        optionE1Two = document.getElementById("questions"); 
        optionE1Two.innerHTML = str; 
       } 
      } 
      document.getElementById("difficulty").addEventListener("change",changeType,false); 
</script> 


<br> 
<div id="text" ><b><center>Questions you select will be listed here.</center></b></div> 
<script> 
function showQuestion(str) { 

    //alert(str); //alert outputs "questions" 
    if(str == "") { 
     document.getElementById("text").innerHTML=""; 
     return; 
    } 
    if(window.XMLHttpRequest){ 
     hr = new XMLHttpRequest(); 
    }else { 
     hr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    hr.onreadystatechange=function() { 
     if(this.readyState==4 && this.status==200){ 
      document.getElementById("text").innerHTML=this.responseText; 
     } 
    }; 
    hr.open("GET", "URL", true); 
    hr.send(); 
} 
</script> 

Answer 1

Bienvenue dans Stack Overflow!

Voici ma compréhension de votre logique.

1. L'utilisateur sélectionne la difficulté
2. L'utilisateur sélectionne la question de travailler avec
3. Ensuite, vous traitez cette action

Vous êtes à la recherche de l'ID, la valeur contenant l'ID, de la question sélectionnée ? J'ai mis en place un Codepen de ma solution. J'ai essayé d'éviter de faire des changements dramatiques. Je l'ai changement:

• Changed « id » à « valeur » sur les options de sélection
• Modified l'événement « onChange » pour envoyer l'élément entier
• ligne Ajouté 52 pour faire le QuestionID un var pour faire l'avenir utiliser un peu plus facilement

L'utilisation de valeurs est préférée pour plusieurs raisons. L'un en particulier est l'accessibilité. Le DOM permet un accès direct à l'index sélectionné et sa valeur. Je recommande fortement d'examiner votre code pour les erreurs de syntaxe. Il y en a pas mal. J'en ai abordé quelques-uns qui sont apparus et ont entravé la solution à votre question.

P.S. J'ai aussi fait quelques mods pour corriger la fonction changeType(). Il lançait une erreur lors de la définition de innerHTML.

var data = [{ 
 
    name: "E", 
 
    options: ["Question1", "Question2"] 
 
    }, 
 

 
    { 
 
    name: "M", 
 
    options: ["Question3", "Question4"] 
 
    }, 
 

 
    { 
 
    name: "H", 
 
    options: ["Question5", "Question6"] 
 
    } 
 
]; 
 

 

 
function changeType() { 
 
    var i, optionSelected, str, j, optionE1Two; 
 

 
    //get currently selected first option 
 
    optionSelected = document.getElementById("difficulty").value; 
 

 
    i = 0; 
 
    while (i < data.length && data[i].name != optionSelected) { 
 
    i++; 
 
    } 
 

 
    //populate second menu 
 
    if (i < data.length) { 
 
    str = '<option value="">Select a question</option>'; 
 
    for (j = 0; j < data[i].options.length; j++) { 
 
     str += '<option value = "' + data[i].options[j] + '">' + data[i].options[j] + '</option>'; 
 
    } 
 

 
    optionE1Two = document.getElementById("questions"); 
 
    optionE1Two.innerHTML = str; 
 
    
 
    document.getElementById("text").innerHTML = "<b><center>Questions you select will be listed here.</center></b>"; 
 
    } 
 
} 
 
document.getElementById("difficulty").addEventListener("change", changeType, false); 
 

 
function showQuestion(el) { 
 
    // Accepting the element allows direct access 
 
    console.dir(el.value); // consoles the value of the selected option. 
 

 
    var questionId = el.value; 
 

 
    if (questionId == "") { 
 
    document.getElementById("text").innerHTML = "<b><center>Questions you select will be listed here.</center></b>"; 
 
    return; 
 
    } else { 
 
    document.getElementById("text").innerHTML = "<b><center>You have selected Question: " + el.options[el.selectedIndex].text + "</center></b>"; 
 
    } 
 
    if (window.XMLHttpRequest) { 
 
    hr = new XMLHttpRequest(); 
 
    } else { 
 
    hr = new ActiveXObject("Microsoft.XMLHTTP"); 
 
    } 
 
    hr.onreadystatechange = function() { 
 
    if (this.readyState == 4 && this.status == 200) { 
 
     document.getElementById("text").innerHTML = this.responseText; 
 
    } 
 
    }; 
 
    hr.open("GET", "URL", true); 
 
    hr.send(); 
 
}

<form> 
 
    <select id="difficulty" name="difficulty" onchange="changeType();"> 
 
    <option value="">Select a difficulty level</option> 
 
    <option value="E" >Easy</option> 
 
    <option value="M">Medium</option> 
 
    <option value="H">Hard</option> 
 
    </select> 
 
    <!-- changed the change event to send the element as a whole --> 
 
    <select name="questions" id="questions" onchange="showQuestion(this)"> 
 
     <option value="">Select a question</option> 
 
     <option value="1">Question1</option> 
 
     <option value="2">Question2</option> 
 
    </select> 
 
</form> 
 
<br> 
 
<div id="text"> 
 
    <b><center>Questions you select will be listed here.</center></b> 
 
</div>