用下拉选择框切换特定区域的文字显示，非常实用的效果

用下拉选择框切换特定区域的文字显示，非常实用的效果

- 中国WEB开发者网络 (http://www.webasp.net)
-- 网页特效 (http://www.webasp.net/javascript/)
--- 用下拉选择框切换特定区域的文字显示，非常实用的效果 (http://www.webasp.net/javascript/1/533.htm)

-- 发布日期： 2005-06-16

<style type="text/css">
.dropcontent{
width: 300px;
height: 140px;
border: 1px solid black;
background-color: #FFECC6;
display:block;
}
</style>
<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)
</script>
<form name="dropmsgform">
<select name="dropmsgoption" size="1" style="width:300" onChange="expandone()">
<option selected>新浪网头条新闻</option>
<option>网易头条新闻</option>
<option>搜狐头条新闻</option>
</select>
<br>
<div id="dropmsg0" class="dropcontent">
中新网5月3日电据中国中央电视台今晚报道，国际足联今日在苏黎世总部作出决定，原定九月在中国举办的女足世界杯将易地进行。为了弥补损失，中国将自动获得2007年世界杯的举办权目前已经有美国和澳大利亚表示愿意承办本届世界杯，但是最终将由哪个国家举办还没有定论。另外，对2006年德国世界杯是否由32支球队扩大到36支的问题，也还没有作出最后的决定。
</div>
<div id="dropmsg1" class="dropcontent">
第四届女足世界杯原定于今年9月23日到10月11日在中国举行。但是国际足联在听取国际足联医学委员会的报告之后，通过了易地举办的决议。为了弥补损失，国际足联也同时承
诺2007年中国将获得女足世界杯的举办权。目前已经有美国和澳大利亚表示愿意承办本届世界杯，但是最终将由哪个国家举办还没有定论。另外，对2006年德国世界杯是否由32支球队扩大到36支的问题，也还没有作出最后的决定。
</div>
<div id="dropmsg2" class="dropcontent">
目前已经有美国和澳大利亚表示愿意承办本届世界杯，但是最终将由哪个国家举办还没有定论。另外，对2006年德国世界杯是否由32支球队扩大到36支的问题，也还没有作出最后的决定。目前已经有美国和澳大利亚表示愿意承办本届世界杯，但是最终将由哪个国家举办还没有定论。另外，对2006年德国世界杯是否由32支球队扩大到36支的问题，也还没有作出最后的决定。
</div>
</form>

webasp.net