Question

jquery怎么实现选中select表单中某个option选项时弹出一个div层说明option中的内容？

<select>

<option value="xxx">苹果</option>
<option value="xx">葡萄</option>
<option value="x">香蕉</option>
</select>
<div id="qqq">青的</div>
<div id="aaa">紫的</div>
<div id="zzz">黄的</div>
比如上边这段代码，下边的三个层平时是隐藏的，然后我选择苹果时，内容为“青的”这个div框就会显示出来，选择葡萄时，紫的就出来。
怎么用jquery实现呢？
因为分不多，先给20分，如果能解决再把剩下的180全给大神。
急，在线等t.t

Answer 1

思路：点击option时触发事件，获取当前option的index，然后将对应index的div显示出来。实例演示如下:

1、HTML结构

<div id="test">
	<li>青的</li><li>紫的</li><li>黄的</li>
</div>
<select>
	<option value="option-1">苹果</option> 
	<option value="option-2">葡萄</option> 
	<option value="option-3">香蕉</option> 
</select>

2、jquery代码

$(function(){
	$("#test li").hide();
	$("select option").click(function() {
		var n = $(this).index();
		$("#test li").hide();
		$("#test li").eq(n).show();
	});
});

3、效果演示

Answer 2

//为了option选项与div对应 可以把div的id设置成option相对应的值
<select>

<option value="xxx">苹果</option> 
<option value="xx">葡萄</option> 
<option value="x">香蕉</option> 
</select>
<div id="xxx">青的</div>
<div id="xx">紫的</div>
<div id="x">黄的</div>

$("select option").click(function(){
    var id = $(this).attr("value");
     $("div").hide();//把之前显示的先隐藏
    $("#"+id+"").show();
});

至于你说的  具体是让它弹出？还是只是显示就行..我没看明白

追问

只是显示就行了。
谢谢啦，我照你的试验下先。

追答

嗯 先看看行不行 不行再问我

追问

昨晚奋斗到一点半，在好基友的帮助下终于完成了。
虽然采用的是和你完全不同的方式，但是你很热心啊，80分送你了！

追答

嗯 没关系 呵呵 这些东西 只要写多了 解决的方法有很多的

Answer 3

select表单有一种方法能够实现你的设想:change事件

假设select中有id为demo,将选中的那个option选项值现实到id为item的div中

,首先div要存在,并且display为hidden;

$('#demo').change(function(){
    var con = $(this).html();
    $('#item').html(con);
    $('#item').css('display','block');
})