Question

我正在创建一个在线考试系统，我有两个下拉菜单。一个菜单检查难度级别，并根据“Easy”，“Medium”和“Hard”的选择，第二个菜单显示相关问题。现在，我正在尝试从第二个下拉菜单中检索问题的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！

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

用户选择难度
用户选择要使用的问题
然后您处理该操作

您正在寻找所选问题的ID，包含ID的值？我已经整理了Codepen我的解决方案。我尽量避免做出任何戏剧性的改变。我做了改变：

已更改＆＃39; id＆＃39;价值＆＃39;选择选项
修改了＆＃39; onChange＆＃39;发送整个元素的事件
添加第52行，使questionId变为var，以便将来使用更轻松

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

P.S。我还修了几个mod来修复changeType（）函数。在设置innerHTML时抛出错误。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: