Home >Web Front-end >HTML Tutorial >Display the corresponding content through the drop-down box. _html/css_WEB-ITnose

Display the corresponding content through the drop-down box. _html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:24:412079browse

比如，我有下拉框

<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代码。。

回复讨论(解决方案)

右边是什么

右边是什么

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

9ab00f6c0f1448866b7b2a5f7d6c30af2cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
$(document).ready(function(){
$("#sel").change(function(){
var flag = $(this).val();
switch(flag){
case '1':
$("#content"+flag).show().siblings('div').hide();
break;
case '2':
$("#content"+flag).show().siblings('div').hide();
break;
case '3':
$("#content"+flag).show().siblings('div').hide();
break;
default:
$("div").hide();
alert("未选择");
}
});
});
2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1

  6c04bd5ca3fcae76e30b72ad730ca86d
    fc6583a364060666ba94facc48b32f60
    5a07473c87748fb1bf73f23d45547ab8--请选择--4afa15d3069109ac30911f04c56f3338
    859be17dfcd6af2d26185135fb5bd8fc显示内容14afa15d3069109ac30911f04c56f3338
    656b9f2e82088a1bf3f244445950414e显示内容24afa15d3069109ac30911f04c56f3338
    9403fa44e4282955565dbaeb33a85ca2显示内容34afa15d3069109ac30911f04c56f3338
  18bb6ffaf0152bbe49cd8a3620346341
  914a3d37a5db9eb20343a9470e259429content116b28748ea4df4d9c2150843fecfba68
  051ba38678d4e35cfbb1f8f901c8d892content216b28748ea4df4d9c2150843fecfba68
  f6c770426c4d6d39a350a85fa200aeaccontent316b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956

<!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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to rotate this triangle in css3_html/css_WEB-ITnoseNext article：How to rotate this triangle in css3_html/css_WEB-ITnose

See more

Display the corresponding content through the drop-down box. _html/css_WEB-ITnose

回复讨论(解决方案)

Related articles