javascript 如何根据下拉菜单中选择的项目将文本框更改为可见？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7940235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a text box to visible depending on what item is selected in a drop down menu?
提问by Alicia
I have a drop-down menu with a list of school subjects in it, the last option is "Add New Subject" so when the user selects that option, I need a text box to appear.
我有一个下拉菜单，其中包含学校科目列表，最后一个选项是“添加新科目”，因此当用户选择该选项时，我需要出现一个文本框。
My HTML form looks like this: (I have only included the relevant bits, there is a bit more stuff on it.
我的 HTML 表单如下所示：（我只包含了相关的部分，还有更多的内容。
<form method="post" action="createQuestion.php" name="cq"> <select name="subject" id="subject"> <option value="biology">Biology</option> <option value="maths">Maths</option> <option value="economics">Economics</option> <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>> Add New Subject </option> </select> <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden"> </form>
<form method="post" action="createQuestion.php" name="cq"> <select name="subject" id="subject"> <option value="biology">Biology</option> <option value="maths">Maths</option> <option value="economics">Economics</option> <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>> Add New Subject </option> </select> <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden"> </form>
I have spent ages trying to get this to work with javascript, and I just can't get it to work at all.
我花了很长时间试图让它与 javascript 一起工作，但我根本无法让它工作。
This is the js I wrote, but doesn't work
这是我写的js，但不起作用
function addSubject(){
newSub = document.getElementById('newSub').name
selectedSubject = document.getElementById('subject').value
if (selectedSubject == newSub){
document.getElementById(newSubtxt).style.display = 'block';
}}
I would be so grateful if someone could help me out with the javascript, so that it will work. Thanks in advance :)
如果有人可以帮助我使用 javascript，我将不胜感激，这样它就会起作用。提前致谢 ：）
回答by scessor
Change your invisible input to:
将您的隐形输入更改为：
<input type="text" name="newSubtxt" id="newSubtxt" style="display: none" />
and your js:
和你的js：
function addSubject() {
var selectedSubject = document.getElementById('subject').value;
if (selectedSubject == 'newSub') {
document.getElementById('newSubtxt').style.display = 'block';
}
}
Also see my jsfiddle.
另请参阅我的jsfiddle。
回答by Mansoor Gee
Change the style of textbox with
更改文本框的样式
<input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'>
I have used jQuery (javascript library) to solve your problem.
我已经使用 jQuery（javascript 库）来解决您的问题。
$(document).ready(function () {
$('#subject').change(function (){
if($('#subject').val()=='newSub')
$('#newSubtxt').show();
else
$('#newSubtxt').hide();
});
});
See my jsfiddle
看我的jsfiddle
