jquery操作select常见方法大全【7种情况】

jquery操作select常见方法大全【7种情况】

本文主要介绍了jquery操作选择的常用方法,并结合实例总结分析了jQuery操作选择的七种常见情况及相关操作技巧。有需要的可以参考一下。

本文阐述了jquery操作选择的常用方法。分享给你,供你参考,如下:

选择之前HTML页面设计中的下拉框,或者multiple=multiple 时,显示为列表。经常在页面上进行操作,这些操作无非是:

1.获取所选选择的选项或文本的值。

2.删除选中的选项。

3.添加新选项进行选择。

4.获取选择选项的长度,即数字大小

5.空选择。

6.在两个选择框之间互相添加和删除,从左到右,从右到左,通常是多选的情况。

7.确定选择框中是否有某个值的选项。

对于第一种情况,使用以下方法:

$(#select_id )。change(function(){//代码.});//为Select添加一个事件,当选择其中一个时触发

var checkText=$(#select_id )。查找(选项:已选择)。text();//获取通过Select选择的文本

var checkValue=$(#select_id )。val();//获取Select选择的值

var checkIndex=$(#select_id )。获取(0)。selectedIndex//获取Select选择的索引值

var max index=$( # select _ id option:last )。attr( index );//获取Select的最大索引值。jQuery设置由Select选择的文本和值:

$(#select_id )。获取(0)。selectedIndex=1;//选择选择索引值为1的项目。

$(#select_id )。val(4);//选择Select值为4的项目。

$( # select _ id option[text= jQuery ])。attr(selected ,true);//将Select的文本值设置为jQuery选择的项目。

在第二种情况下,删除的处理:

$(#select_id option:last )。移除();//删除Select中索引值最大的选项(最后一个)

$(#select_id option[index=0])。移除();//删除Select中索引值为0的选项(第一个)

$(#select_id option[value=3])。移除();//删除Select中值为“3”的选项

$(#select_id option[text=4])。移除();//删除Select中Text=4 的选项

如果要删除选中的选项,需要获取选中选项的序列号。var检查索引=$ (# select _ id )。获取(0)。selectedindex然后调用上面的方法删除。

对于第三种情况,添加选项:

$(#select_id )。append( option Value= Value text/option));//追加一个选项(下拉项)以供选择

$ (# select _ id )。prepend (option value= 0 请选择/option));//为Select插入一个选项(第一个位置)

对于第四种情况,获取select的长度。

var total count=$( # single _ user _ choice )。get(0). options . length;

在第五种情况下,清除选择。

$(#single_user_choice )。get(0). options . length=0;

第六种情况。两个选择框之间的增删,从左到右,从右到左,一般是多选的情况,也就是设置了multiple=multiple 。

var $ options=$( # select 1 option:selected );//获取当前选中的项目

var $ remove=$ options . remove();//删除下拉列表中选中的项目

$ remove . appendto( # select 2 );//追加到对方

在第七种情况下,确定select中是否有某个值的选项。

函数is_Exists(selectid,value){

var theid= # selectid

var count=$(theid)。get(0). options . length;

var isExist=false

for(var I=0;icounti ){

if ($(theid)。获取(0)。选项[i]。value==value){

isExist=true

打破;

}

}

返回isExist

}

更多对jQuery感兴趣的读者,请参考我们的专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》和《jquery选择器用法总结》。

希望这篇文章对jQuery编程的大家有所帮助。

jquery操作select常见方法大全【7种情况】