Question

用jquery实现选中select里面的value 来切换对应的div

<select name="queryType" >
<option value="1" name ="queryType"> 1</option>
<option value="2" name ="queryType"> 2</option>
<option value="3" name ="queryType"> 3</option>
</select>

<div >
<div id ="div1"></div>
<div id ="div2"></div>
<div id ="div3"></div>
</div>
求详细的JS，。或jquery 源码

Answer 1

如下代码可以实现，你运行试试吧：

<select name="queryType" onchange="Cmd(this)">
	<option value="1" name="queryType"> 1</option>
	<option value="2" name="queryType"> 2</option>
	<option value="3" name="queryType"> 3</option>
</select>
<div>
	<div id="div1">111</div>
	<div id="div2" style="display:none;">222</div>
	<div id="div3" style="display:none;">333</div>
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
	function Cmd(obj){
		$(obj).next("div").find("div").each(function(){
			$(this).hide();
		});
		$("#div" + obj.value).show();
	}
</script>

追问

出来显示的效果了！但是选择其他的前面选择的层不隐藏

追答

“但是选择其他的前面选择的层不隐藏”，这个是什么意思呢？具体解释一下吧

追问

就是我选择第一个选项的时候显示的层 要在我选择其他选项的时候隐藏。。

jquery 我太新手了 麻烦了。。。有加上注解。。

追答

我代码就是这样的效果啊

当选中1的时候，1显示，2和3隐藏；

当选中2的时候，2显示，1和3隐藏；

当选中3的时候，3显示，1和2隐藏

function Cmd(obj){ //当选项改变时运行
    $(obj).next("div").find("div").each(function(){ //查找select对象的下一节点里的所有div
        $(this).hide(); //让所有div隐藏
    });
    $("#div" + obj.value).show(); //让选择的value对应的div显示
}

Answer 2

$("select[name='queryType']").change(function(){

$div = $("#div"+$(this).val());//这就是你选择的div了

$div.parent().children("div").hide(); //让其他所有div隐藏

$div.show(); //你选中的div显示

});