针对不同下拉选项的警告消息

Question

我正在尝试创建一个带有选项的下拉菜单，这些选项为每个选项带来不同的警告消息。

例如，创建了一个带有“代数”、“化学”和“英语3”选项的下拉菜单。我想要一个警报“几何课程要求”弹出的代数。“生物必修课”用于化学，“英语1和2课程用于英语。

我该怎么做呢？谢谢!我几乎只需要功能上的帮助。

 <select id="test-dropdown" onchange="choice1(this)">
    <option value="1">Algebra</option>
    <option value="2">Chemistry</option>
    <option value="3">English 3</option>
 </select>

Answer 1

下面是一个示例-我没有使用alert，而是更改了页面上的文本，我还将事件处理程序定义移到了脚本中，而不是内联

注意，我还添加了一个“请选择”，因为如果在加载时已经选择了代数，则不能显示它的文本

​

var choices = ["","Geometry course required","Biology course required","English 1 and 2 courses required"];
window.onload=function() {
  document.getElementById("test-dropdown").onchange=function() {
    document.getElementById("choice").innerHTML=choices[this.value];
  }
  document.getElementById("test-dropdown").onchange(); // show default
}

     <select id="test-dropdown">
        <option value="0">Please select</option>
        <option value="1">Algebra</option>
        <option value="2">Chemistry</option>
        <option value="3">English 3</option>
     </select>
     <span id="choice"></span>

​

如果没有请选择

​

var choices = ["","Geometry course required","Biology course required","English 1 and 2 courses required"];
window.onload=function() {
  document.getElementById("test-dropdown").onchange=function() {
    document.getElementById("choice").innerHTML=choices[this.value];
  }
  document.getElementById("test-dropdown").onchange(); // show default
}

     <select id="test-dropdown">
        <option value="1">Algebra</option>
        <option value="2">Chemistry</option>
        <option value="3">English 3</option>
     </select>
     <span id="choice"></span>

​

带警报

​

var choices = ["","Geometry course required","Biology course required","English 1 and 2 courses required"];
window.onload=function() {
  document.getElementById("test-dropdown").onchange=function() {
    if (this.value !== 0) alert(choices[this.value]);
  }
}

<select id="test-dropdown">
        <option value="0">Please select</option>
        <option value="1">Algebra</option>
        <option value="2">Chemistry</option>
        <option value="3">English 3</option>
     </select>
     <span id="choice"></span>

​

Answer 2

​

var a = document.getElementById('test-dropdown');
a.addEventListener('change',function(){
var b = document.querySelectorAll('option:checked');
for(var i = 0; i < b.length; i++){
if(b[i].value == 1){
alert('Geometry course required')
}else if(b[i].value == 2 ){
alert('Biology course required')
}else{
alert('English 1 and 2 courses required for English')
}
}
});

<select id="test-dropdown">
    <option value="0">select option</option>
    <option value="1">Algebra</option>
    <option value="2">Chemistry</option>
    <option value="3">English 3</option>
 </select>

​

Answer 3

也可以在codepen中进行检查，

function choice1(selected)
    {
        if(selected.options[selected.selectedIndex].text === "Algebra")
        {
          alert("Geometry course required");
        }
        else if(selected.options[selected.selectedIndex].text === "Chemistry")
        {
        alert("Biology course required");
        }
        else if(selected.options[selected.selectedIndex].text === "English 3")
        {
        alert("English 1 and 2 courses required for English");
        }
    }