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

Posted 2023-04-29

<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

思路：点击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、效果演示

参考技术A

//为了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分送你了！

追答

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

本回答被提问者采纳 参考技术B

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');
)

jquery 中select里focus()怎么用

表单可以直接调用focus的，如：
#('select#abc').foucs();
focus仅仅是让表单元素处于焦点获取状态而已，文本会有个指针状态，下拉表单、单选、复选则是有个虚框或黄色的框框显示而已。 参考技术A 是选中select其中一项吗？
那应该是 对 option 某一项 attr('selected', 'selected')，这样才是选中状态。
读取的时候用val()
jquery也提供了一个方法快速设置选中状态，用val来设置，具体请查看jquery的api