javascript 从下拉选项显示基于 onchange 的 div，帮助
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5120521/
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
Show div base on onchange from dropdown option, help
提问by omc11
I try to show some information inside of <div>as following:
我尝试在其中显示一些信息，<div>如下所示：
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
by choose from drop down option e.g.
通过从下拉选项中选择例如
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
and the full code as following,
和完整的代码如下，
<tr>
<td>Book Option</td>
<td>
<select name="books">
<?php foreach ($others as $other) { ?>
<?php if ($other == $other['other']) { ?>
<option value="<?php echo $other['other']; ?>" selected="selected"><?php echo $other['title']; ?></option>
<?php } else { ?>
<option value="<?php echo $other['other']; ?>"><?php echo $other['title']; ?></option>
<?php } ?>
<?php } ?>
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
</select></td>
</tr>
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
Is there some way to fix this?
有没有办法解决这个问题？
采纳答案by Josh
<script type="text/javascript">
function showDiv()
{
// hide any showing
$(".details_div").each(function(){
$(this).css('display','none');
});
// our target
var target = "#details_" + $("#test_select").val();
// does it exist?
if( $(target).length > 0 )
{
// show it
$(target).css('display','block');
}
}
$(document).ready(function(){
// bind it
$("#test_select").change(function(){
showDiv();
});
// run it automagically
showDiv();
});
</script>
<style>
.details_div
{
display:none;
}
</style>
{/literal}
<select id="test_select">
<option value="">- Select - </option>
<option value="book" selected="selected">Books</option>
<option value="movie">Movie</option>
</select>
<div id="details_book" class="details_div">BOOK DETAILS</div>
<div id="details_movie" class="details_div">MOVIE DETAILS</div>
回答by jeroen
It looks like you're using jquery so I would first suggest to remove all javascript from the html / php and put it in a separate section or file.
看起来您正在使用 jquery，所以我首先建议从 html/php 中删除所有 javascript 并将其放在单独的部分或文件中。
You can then simply do stuff like:
然后，您可以简单地执行以下操作：
$("#art_indicator").change(function() {
// do what you want to do
});
Also, the html for #show_detailsseems to be wrong:
此外，html for#show_details似乎是错误的：
style="'display:block;' : 'display:none;'"
is no valid style declaration.
不是有效的样式声明。
回答by Michael Berkowski
I don't think <option>registers the onchangeevent. What you want instead is to use its parent <select onchange=''>to define the change event.
我不认为<option>注册该onchange事件。您想要的是使用其父级<select onchange=''>来定义更改事件。
<script type='text/javascript'>
function selOnChange() {
if ($('#selectList').value == "art" {
$("#show_details").css('display', 'block');
} else {
$("#show_details").css('display', 'none');
}
}
Now you need to have a default "unselected" option. I have it here with value="-1"
When the select list changes, if its value is the value of #art_indicator, the div will be shown. otherwise, the div will not be shown.
现在您需要有一个默认的“未选择”选项。I have it here with value="-1" When the select list changes, if its value is the value of #art_indicator, the div will be shown. 否则，将不会显示 div。
<select id='selectList' name="books" onchange="selOnChange()">
<option value="-1">Select something</option>
<option id="#art_indicator" value="art">Art choice...</option>
<?php // list all your other options ?>
</select>
