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


Posted in jQuery onMay 28, 2019

本文实例讲述了jquery操作select常见方法。分享给大家供大家参考,具体如下:

在前段HTML页面设计中select 下拉框,或者 在 multiple="multiple" 时,表现为列表。经常会在页面上对其进行操作,这些操作不外乎:

1. 得到选中的 select 的 option 的值或者text.
2. 删除选中的 select 的 option.
3. 向select中增加新的option.
4. 得到select option 长度,也就是个数size
5. 清空select.
6. 两个select 框之间互相添加删除,从左边到右边,从右边到左边的操作,通常是多选情况。
7. 判断在 select 框中是否存在某一个值的选项

对第一种情况,用如下方法:

$("#select_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 jQuery设置Select选择的Text和Value:
$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);  //设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);  //设置Select的Text值为jQuery的项选中

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

$("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

如果要删除选中的option ,则需要先得到 选中option 的序号. var checkIndex=$("#select_id ").get(0).selectedIndex; 然后再调用上面的方法删除.

对第三种情况,增加option 的处理:

$("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)

对第四种情况,得到select 的长度

var totalcount=$("#single_user_choice").get(0).options.length;

第五种情况,清空select

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

第六种情况。两个select 框之间互相添加删除,从左边到右边,从右边到左边的操作,通常是多选情况,也就是设置了 multiple="multiple" 。

var $options = $('#select1 option:selected');//获取当前选中的项
var $remove = $options.remove();//删除下拉列表中选中的项
$remove.appendTo('#select2');//追加给对方

第七种情况,判断在select 是否存在某个value  的 option

function is_Exists(selectid,value){
  var theid='#'+selectid;
  var count=$(theid).get(0).options.length;
  var isExist = false;
  for(var i=0;i<count;i++){
    if ($(theid).get(0).options[i].value == value){
      isExist=true;
      break;
    }
  }
  return isExist;
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现高级检索功能
May 28 #jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
通过jQuery学习js类型判断的技巧
May 27 #jQuery
jQuery中使用validate插件校验表单功能
May 24 #jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
You might like
PHP 递归效率分析
2009/11/24 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
webpack4简单入门实例
2018/09/06 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
python提示No module named images的解决方法
2014/09/29 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python操作Excel之xlsx文件
2017/03/24 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
详解python的变量缓存机制
2021/01/24 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
新教师工作感言
2014/02/16 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2014年团支部工作总结
2014/11/17 职场文书
继续教育个人总结
2015/03/03 职场文书
聘用合同范本
2015/09/21 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS