条件简单的下拉列表？ [英] Conditional simple drop down list?
问题描述
我尝试使用HTML编写网站，我有一个问题。我使用一个带有选项A和B的下拉列表，但是在选择其中一个后，我想在同一页面创建另一个下拉列表和文本字段，并提出不同的问题。例如，如果有人选择A，那么它将被问为问题C和D，如果有人选择了B，它将被问为问题E和F.什么是编程这个的最好方法？
I'm trying to program a website using HTML and I have a question. I'm using a drop-down list with options A and B, but after one of this is chosen, I'd like to create another drop down list and text fields at the same page, with different questions. For example, If some one choose A, then it'll be asked questions C and D, and if someone chose B, it'll be asked questions E and F. What is the best way to program this ?
对不起，英语中的任何错误，我不是母语。
并且提前感谢。
Sorry for any mistake in English, I'm not a native speaker. And Thanks in advance.
推荐答案
这取决于数据是否是静态的
It depends on whether the data is static (i.e. coded on the page and will not change) or dynamic (i.e. delivered from the web server).
如果您的下拉列表只应根据列表A过滤其内容，那么您将可能想使用一些JavaScript来隐藏/删除你不想要的项目。考虑查看jQuery，因为它是一个非常容易使用和理解的框架，并有很多很好的例子，在Stack Overflow和整个互联网，你可以参考。
If your drop-down lists are supposed to only filter their contents based on List A, then you will probably want to use some JavaScript to hide / remove the items that you don't want. Consider looking at jQuery for this as it's an extremely easy to use and understand framework and there are plenty of good examples both on Stack Overflow and throughout the Internet that you can refer to.
如果您的数据需要从Web服务器传递（即您有一个数据库，您指的是列表值），那么您需要提供更多有关您的编程框架的信息（例如ASP.Net，PHP ，等等）以及您希望列表如何工作（Ajax，全页回发等）。
If your data needs to be delivered from a web server (i.e. you have a database that you're referring to for the list values) then you'll need to provide more information about your programming framework (e.g. ASP.Net, PHP, etc) and how you want the lists to work (Ajax, full-page postback, etc).
让我们假设你保持一切静态的页面和隐藏
Let's assume you're keeping everything static on the page and hiding information based on the user's selection.
您的HTML可能如下所示：
Your HTML might look something like this:
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value="A">Question A</option>
<option value="B">Question B</option>
</select>
</div>
<div id="myAnswers">
<div id="A" style="display: none;">
<div id="QuestionC">
<p>Here is an example question C.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value="G">Question G</option>
<option value="H">Question H</option>
</select>
</div>
</div>
<div id="B" style="display: none;">
<div id="QuestionE">
<p>Here is an example question E.</p>
</div>
<div id="QuestionF">
<select id="QuestionOptionsF">
<option value="I">Question I</option>
<option value="J">Question J</option>
</select>
</div>
</div>
</div>
</body>
您的JavaScript（我使用jQuery，如上所述）可能如下所示： p>
Your JavaScript (I'm using jQuery, as mentioned above) could then look like this:
$(function () {
$('#QuestionOptions').change(function () {
$('#myAnswers > div').hide();
$('#myAnswers').find('#' + $(this).val()).show();
});
});
这篇关于条件简单的下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
