首页 > web前端 > html教程 > 通过下拉框来显示对应的内容。_html/css_WEB-ITnose

通过下拉框来显示对应的内容。_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:24:41
原创
2073 人浏览过

比如,我有下拉框

<select name="select">    <option>--请选择--</option>    <option value="1">显示内容1</option>    <option value="2">显示内容2</option>    <option value="3">显示内容3</option>  </select>
登录后复制


比如我选择下拉框“显示内容1”,就在右边显示内容1相关的内容。。
比如我选择下拉框“显示内容2”,就在右边显示内容2相关的内容。。

求html代码。。


回复讨论(解决方案)

右边 是什么

右边 是什么

右边就是显示的内容,随便是什么都可以。




















非常感谢。

<!DOCTYPE html><html><head><script>function changeValue(e){if(e.selectedIndex!=0){document.getElementById("showValue").value=e.options[e.selectedIndex].text;}else{document.getElementById("showValue").value='';}}</script></head><body><select name="select" onchange="changeValue(this)">    <option>--请选择--</option>    <option value="1">显示内容1</option>    <option value="2">显示内容2</option>    <option value="3">显示内容3</option>  </select><input type="text" id="showValue" /></body></html>
登录后复制

<script></script>
<script> <br /> $(document).ready(function(){ <br /> $("#sel").change(function(){ <br /> var flag = $(this).val(); <br /> switch(flag){ <br /> case '1': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '2': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '3': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> default: <br /> $("div").hide(); <br /> alert("未选择"); <br /> } <br /> }); <br /> }); <br /> </script>
  
  
  


      
  
content1

  
content2

  
content3

  

如果要设置一个默认显示内容怎么办,比如什么都不选择的时候。。。
显示content0

<script></script>
<script> <br /> $(document).ready(function(){ <br /> $("#sel").change(function(){ <br /> var flag = $(this).val(); <br /> switch(flag){ <br /> case '1': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '2': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '3': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> default: <br /> $("div").hide(); <br /> alert("未选择"); <br /> } <br /> }); <br /> }); <br /> </script>
  
  
  


      
  
content1

  
content2

  
content3

  

比如默认请选择的情况下,下面显示一个默认的内容。?
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板