javascript - 有没有办法使用 javascript 获取第二个填充的下拉菜单的 id？

Question

我正在创建一个在线考试系统，我有两个下拉菜单。第一个菜单检查难度级别，并根据“简单”、“中等”和“困难”的选择，第二个菜单显示相关问题。现在，我尝试从第二个下拉菜单中检索问题的 ID，该菜单基于第一个下拉菜单。我对 Ajax 还很陌生，有没有办法实现这一点？任何帮助，将不胜感激。谢谢。

    <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

欢迎来到 Stack Overflow!

这是我对你的逻辑的理解。

1. 用户选择难度
2. 用户选择要处理的问题
3. 然后您处理该操作

您正在查找所选问题的 ID、包含 ID 的值吗？我整理了一个Codepen我的解决方案。我试图避免做出任何戏剧性的改变。我确实改变了:

• 将选择选项的“id”更改为“value”
• 修改了“onChange”事件以发送整个元素
• 添加了第 52 行，使 QuestionId 成为 var，以便将来使用更容易

出于多种原因，首选使用值。其中一个特别是可访问性。 DOM 允许直接访问所选索引及其值。我强烈建议检查您的代码是否有语法错误。有不少。我解决了一些突出并阻碍解决你的问题的问题。

附注我还制作了更多的 mods 来修复 changeType() 函数。设置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>