我梦想着一个聪明的人。示例:我在选择框选项 1 中选择,然后它会出现第二个带有选项 1a 或 1b 或类似选项的选择框。但是也许如果您在第一个选项中使用选项 2,那么可能会出现一个文本区域来帮助获取与选项 2 匹配的信息。
我是 javascript 的新手,我问了谷歌,发现了很多小例子。我现在做了类似的事情。但我不确定以这种方式工作是否是个好主意,因为这意味着我必须在第一个的值部分为第二个选择或文本区域编写我的 html 代码。
有谁知道我应该从哪里开始或者我应该如何对我的函数和变量进行排序?
<body>
<select id="cms">
<option value="Stiefmütterchen">Stiefmütterchen</option>
<option value="Primeln">Primeln</option>
<option value="Tulpen">Tulpen</option>
</select>
<script type="text/javascript">
var choosenCMS = document.getElementById('cms');
cms.onchange = function()
{
var show = document.getElementById('show');
show.innerHTML = this.value;
}
</script>
<div id="show"></div>
</body>
最佳答案
作为一个简单的例子,您可以通过找到第一个select
的value
并使用if
语句来显示/隐藏来做到这一点像这样的其他表单元素:
HTML
<select id="cms">
<option>Choose One</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select id="more">
<option value="one-a">One A</option>
<option value="two-b">Two B</option>
<option value="three-c">Three C</option>
</select>
<textarea></textarea>
JS
$("#cms").change(function(){
var grabVal = $(this).val();
if(grabVal == "one"){
$("#more").show();
$("textarea").hide();
}else if(grabVal == "two"){
$("textarea").show();
$("#more").hide();
}else{
$("textarea").hide();
$("#more").hide();
}
});
CSS
#more, textarea{
display: none;
}
关于Javascript onchange 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27931921/