Javascript-隐藏/显示字段的简单表单脚本
[英]Javascript - Simple form script to hide/show fields
问题描述
Im looking for a simple script in javascript that i can extend, at a basic level Im looking to show 1 field based on which option from a <select> the user chooses. 
我正在寻找一个可以在基本级别上扩展的javascript脚本，我正在根据用户从<select>中选择哪个选项来显示1个字段。
<select id="options">
<option value="spoon">Spoon</option>
<option value="form">Fork</option>
</select>
if select=spoon {
<input>enter your favorite soup</input>
} else {
<input>Your gonna need a knife</input>
}
Simple JS is the key! 简单的JS是关键！
3 个解决方案
解决方案1
1 2010-05-12 13:49:52
I think i posted this somewhere else on SO, but couldnt find that post now. 我想我在SO上的其他地方发布了此信息，但现在找不到该信息。 It could be something for you to build on. 这可能是您可以依靠的。
Look ma, no jQuery! 看吧，没有jQuery！ (yay!) （好极了！）
<body>
<select id="mySelect" onchange="npup.doSelect(this);">
<option value="">Npup says 'select'</option>
<!-- the option values are suffixes for the elements to show -->
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<!-- container for any elements that are to be in the game -->
<div id="mySpecialElements">
<!-- these have ids that end with an index for easy retrieval in "findeElement" function below-->
<div id="npup0" class="hidden">div 0</div>
<div id="npup1" class="hidden">div 1</div>
<div id="npup2" class="hidden">div 2</div>
</div>
<script type="text/javascript">
window.npup = (function (containerId, baseId) {
// save the container of your special element
var elementsContainer = document.getElementById(containerId);
var baseId = baseId;
function doSelect(select) {
// get value of select
var idx = select.selectedIndex;
if (idx<0) {return;}
var value = select.options[idx].value;
// find element based on the value of the select
var targetDiv = findElement(value);
if (!targetDiv) { return;} // didn't find the element, bail
// do magic..
hideAll(elementsContainer);
showElement(targetDiv);
}
// retrieve some element based on the value submitted
function findElement(value) {
return document.getElementById(baseId+value);
}
// hide all element nodes within some parent element
function hideAll(parent) {
var children = parent.childNodes, child;
// loop all the parent's children
for (var idx=0, len = children.length; idx<len; ++idx) {
child = children.item(idx);
// if element node (not comment- or textnode)
if (child.nodeType===1) {
// hide it
child.style.display = 'none';
}
}
}
// display a certain element
function showElement(element) {
element.style.display = '';
}
// hide all on page load (might want some extra logic here)
hideAll(elementsContainer);
// export api to use from select element's onchange or so
return {
doSelect: doSelect
};
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements
</script>
</body>
解决方案3
0 2010-05-12 13:47:59
You can make use of the onchange attribute of the <select> element to execute some Javascript code on every change of the dropdown. 您可以使用<select>元素的onchange属性在下拉列表的每次更改上执行一些Javascript代码。
<select onchange="myFunction(this)">
(you see that I passed the dropdown element itself as method argument, this is just done for convenience) （您看到我将dropdown元素本身作为方法参数传递了，这只是为了方便起见）
You can use the element.options to get all options and element.selectedIndex to get the index of the currently selected option. 您可以使用element.options获取所有选项，并使用element.selectedIndex获取当前所选选项的索引。
function myFunction(dropdown) {
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
}
You can use document.getElementById() to retrieve any element by id . 您可以使用document.getElementById()通过id检索任何元素。 Imagine that you've the following input elements: 想象一下，您具有以下输入元素：
<input type="text" id="foo">
<input type="text" id="bar">
then you can get them as follows: 那么您可以按以下方式获取它们：
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
You can use the element.style.display to change the CSS display property. 您可以使用element.style.display更改CSS display属性。 A value of block means show and a value of none means hide. block的值表示显示， none的值表示隐藏。 Now do the math: 现在算一下：
function myFunction(dropdown) {
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
if (selectedOption == 'spoon') {
foo.style.display = 'none'; // Hide foo.
bar.style.display = 'block'; // Show bar.
} else {
foo.style.display = 'block'; // Show foo.
bar.style.display = 'none'; // Hide bar.
}
}
To learn more about Javascript and HTML DOM, I recommend this tutorial . 要了解有关Javascript和HTML DOM的更多信息，我推荐本教程 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.