使用javascript函数的HTML选择下拉列表 [英] HTML select dropdownlist with javascript function
问题描述
< head>
< script type =text / javascript>
function showonlyone（thechosenone）{
var article = document.getElementsByTagName（div）;
for（var x = 0; x< article.length; x ++）{
name = article [x] .getAttribute（name）;
if（name =='article'）{
if（article [x] .id == thechosenone）{
article [x] .style.display ='block';
}
else {
article [x] .style.display ='none';
}
}
}
}
< / script>
< / head>
< form>
< select>
< option SELECTED>选择一个< / option>
< option value =javascript：showonlyone（id1）>第一个< / option> <！ - 这可能是错误的 - >
< option value =javascript：showonlyone（id2）> Second< / option>
< / select>
< / form>
< div name =articleid =id1style =display：none;>
第一个选中
< / div>
< div name =articleid =id2style =display：none;>
第二个选中
< / div>
以下是应该做的事： 创建一个下拉列表（带3个值）
的内容如果您点击Second 它应该只显示< div id =id2>
$的内容b
$ b
我知道这不能像这样工作。但我不知道如何才能做到这一点。
可能比这个javascript函数更简单，但必须这样。
感谢您的帮助
使用onchange事件处理程序： 更新您的
< select> to < select onchange =showonlyone（this）> 。 b <选项> 值更改为ID - 不是JavaScript调用。 更新您的JavaScript以接受HTMLSelectElement（将由上面的 this 传入）。 （是的，您在这里是正确的。）这是一个固定的工作版本： http://jsfiddle.net/YRF6u/ <
< head>
< script type =text / javascript>
函数showonlyone（选择器）{
var thechosenone = selector.value;
var article = document.getElementsByTagName（div）;
for（var x = 0; x< article.length; x ++）{
name = article [x] .getAttribute（name）;
if（name =='article'）{
if（article [x] .id == thechosenone）{
article [x] .style.display ='block';
} else {
article [x] .style.display ='none';
}
}
}
}
< / script>
< / head>
< form>
< select onchange =showonlyone（this）>
< option SELECTED>选择一个< / option>
< option value =id1>第一个< / option>
< option value =id2>第二个< / option>
< / select>
< / form>
< div name =articleid =id1style =display：none;>
第一个选中
< / div>
< div name =articleid =id2style =display：none;>
第二个选中
< / div>
我不会考虑此生产就绪代码，但它应该足以解决您当前的问题的问题。
This is how far I got:
<head>
<script type="text/javascript">
function showonlyone(thechosenone) {
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}
else {
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select>
<option SELECTED>Choose one</option>
<option value="javascript:showonlyone(id1)">First</option> <!-- That's probably wrong -->
<option value="javascript:showonlyone(id2)">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
Here is what it should do:
Create a dropdownlist (with 3 Values)
If you click on "First" it should only show the of the content of
<div id="id1">If you click on "Second" it should only show the of the content of
<div id="id2">
I know that this can't work like this. But I do not know how I can get this working. There might be a easier way than this javascript function but it has to be this way.
Thank you for your help
Use a onchange event handler instead:
- Update your
<select>to<select onchange="showonlyone(this)">. - Change your
<option>values to only the IDs - not JavaScript calls. - Update your JavaScript to accept the HTMLSelectElement (which will be passed-in by the
this, above). (Yes, you were correct here.) - From the chosen HTMLSelectElement, ask it for its value.
Here is a fixed, working version: http://jsfiddle.net/YRF6u/
Also included here:
<head>
<script type="text/javascript">
function showonlyone(selector) {
var thechosenone = selector.value;
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}else{
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select onchange="showonlyone(this)">
<option SELECTED>Choose one</option>
<option value="id1">First</option>
<option value="id2">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
I would not consider this production-ready code, but it should be sufficient enough to solve your current round of questions.
这篇关于使用javascript函数的HTML选择下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
