如果没有选择任何内容,则显示一个div
问题描述:
我使用此javascript在选择时显示不同的div类。我需要的,如果什么也没有选择,例如,当加载页面时显示一个DIV类,以及与根据选择的div的一个取代它......如果没有选择任何内容,则显示一个div
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
CSS:
<style type="text/css" media="screen"><!--
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
border: 1px grey solid;
}
--></style>
HTML:
<form id="FormName" action="blah.php" method="get" name="FormName">
<select name="selectName" size="1" onChange="showDiv(this.value);">
<option value="">Choose One...</option>
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>
</form>
<p id="one" class="hiddenDiv">This is paragraph 1.</p>
<p id="two" class="hiddenDiv">This is paragraph 2.</p>
<p id="three" class="hiddenDiv">This is paragraph 3.</p>
任何人都可以帮忙吗?
答
<select onChange="showDiv(this.value);">
的<select>
元件不具有value
属性。该值位于<option>
儿童。要获得<select>
元素的当前选择的选项的值时,您需要满足以下条件:
var selected = dropdown.options[dropdown.selectedIndex].value;
所以你onchange
调用需要进行如下改变:
<select onchange="showDiv(this.options[this.selectedIndex].value);">
这就是说, onchange
属性应拼写全部小写,而段落不是div。
答
给ID选择列表
<select name="selectName" id="selectName" size="1" onChange="showDiv(this.value);">
通话的window.onload功能
window.onload =function(){
showDiv(document.getElementById("selectName").value);
}