Home > Article > Web Front-end > 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:412046browse
比如，我有下拉框
<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
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> 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
如果要设置一个默认显示内容怎么办，比如什么都不选择的时候。。。
显示content0
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
比如默认请选择的情况下，下面显示一个默认的内容。？