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

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

2024-11-17 02:13:17

推荐回答（3个）

回答1：

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

1、HTML结构


	青的
紫的
黄的

2、jquery代码

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

3、效果演示

回答2：



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

青的

紫的

黄的

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

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

回答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');
})