条件下拉列表Javascript和HTML [英] Conditional DropDown List Javascript and HTML
问题描述
我正在尝试使用html和javascript制作一个带有条件下拉框的网页.假设这是一周中的某一天，例如星期一，那么在星期四时，我需要一个具有不同选项的下拉框；但是有些日子可能会有相同的选择.最初，我有两个下拉框，一个是当该人单击星期几时出现的，然后会出现下拉框，但是我想知道是否有一种方法可以使用javascript函数自动执行此操作，并且还创建了一个仅显示一个某些下拉列表.
I'm trying to make a a webpage that has a conditional dropdown box using html and javascript. Say it's a certain day in the week like Monday I need a different dropdown box with different options when it's Thursday; however some days may have the same options. Originally I had two drop down box one when the person clicked what day it was and then the dropdown box would appear, but I was wondering if there was a way to do this automatically using a javascript function and also creating a function that only displays a certain dropdown list.
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>推荐答案
如果我正确理解了您的要求.这就是使用 jquery
If i understood your requirement correctly. This is what you are looking for using jquery
$("#QuestionOptions").change(function(){
$("#A,#B").hide();
if($(this).val() == "A"){
$("#A").show();
}else{
$("#B").show();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Exapmle of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option value="G">Answer G</option>
<option value="H">Answer H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Exmaple of another question.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value disalbe selected>Choose Your Answer</option>
<option value="I">Answer I</option>
<option value="J">Answer J</option>
</select>
</div>
</div>
</div>
</body>
</html>这篇关于条件下拉列表Javascript和HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
