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

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

分别使用javascript原生的方法和jquery方法

<select id="test" name="">

<option value="1">text1</option>

<option value="2">text2</option>

</select>

code:

一：javascript原生的方法

1:拿到select对象： var myselect=documentgetElementById("test");

2：拿到选中项的索引：var index=myselectselectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value： myselectoptions[index]value;

4:拿到选中项options的text： myselectoptions[index]text;

二：jquery方法（前提是已经加载了jquery库）

1:var options=$("#test option:selected"); //获取选中的项

2:alert(optionsval()); //拿到选中项的值

3:alert(optionstext()); //拿到选中项的文本

如果select标签下只有option标签的话，最直接的办法就是获取select标签下的所有option子标签

var

opt

=

$(select)children()

;

optlength就是option的个数；或者去循环opt，找到option标签计数

windowonload = function(){

 //首先获得下拉框的节点对象；

 var obj = documentgetElementById("obj");

 //1如何获得当前选中的值？：

 var value = objvalue; 

//2如何获得该下拉框所有的option的节点对象

 var options = objoptions; //注意：得到的options是一个对象数组 

//3如何获得第几个option的value值比如我要获取第一option的value,可以这样： 

var value1 =options[0]value; 

//4如何获得第几个option的文本内容比如我要获取第一option的文本,可以这样：

 var text1 = options[0]text; 

//5如何获得当前选中的option的索引？

 var index = objselectedIndex; 

//6如何获得当前选中的option的文本内容？

//从第2个问题，我们已经获得所有的option的对象数组options了。又从第5个问题，我们获取到了当前选中的option的索引值 //所以我们只要同options[index]下标的方法得到当前选中的option了

var selectedText =options[index]text; 

}

以上就是关于jquery怎么实现选中select表单中某个option选项时d出一个div层说明option中的内容全部的内容，包括:jquery怎么实现选中select表单中某个option选项时d出一个div层说明option中的内容、如何获取下拉列表选中的值 jquery、jQuery怎么获取Select的option个数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！