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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现简单飞机大战
Jul 05 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
如何离线执行php任务
2017/02/21 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
php中数组最简单的使用方法
2020/12/27 PHP
浅谈javascript实现八大排序
2015/04/27 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
初学Python实用技巧两则
2014/08/29 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
python引用DLL文件的方法
2015/05/11 Python
Python之str操作方法(详解)
2017/06/19 Python
python flask安装和命令详解
2019/04/02 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python集合删除多种方法详解
2020/02/10 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
“学雷锋活动月”总结
2014/03/09 职场文书
保险经纪人求职信
2014/03/11 职场文书
食品安全处置方案
2014/06/14 职场文书
三行辞职书范文
2015/02/26 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python