jQuery实现select下拉框获取当前选中文本、值、索引


Posted in jQuery onMay 08, 2017

话不多说,请看代码:

//直接保存后缀.htnl用谷歌浏览器打开,亲测有效
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 $(function(){
  //为Select添加事件,当选择其中一项时触发
  $("select:eq(0)").change(function(){
   //code
  });
  //获取Select选中的Text:结果是由所有匹配元素包含的文本内容组合起来的文本
  var checkText = $("select:eq(0) :selected").text();//建议用这个简单
     = $("select:eq(0) option:selected").tetx();
     = $("#One").find(":selected").text();
     = $("#One").find("option:selected").text();

 //如果多选,将返回一个数组,其包含所选的值。
  var checkValue = $("#select_id").val();
 //获取Select选中匹配元素的当前值,即[即使多选也只]取得第一个匹配元素的val内容
  var checkValue = $("select:eq(0) :selected").val();//=========强烈建议用这个,以防多选

  //获取Select选中的索引值
  var checkIndex = $("#select_id ").get(0).selectedIndex; 
  //获取Select最大的索引值 
  var maxIndex = $("#select_id :last").prop("index"); //建议用这个
     = $("#select_id option:last").prop("index"); 
     = $("select:eq(0)").find(":last").prop("index")
     = $("select:eq(0)").find("option:last").prop("index")

 //=========================================================================================
 //jQuery设置Select选择的 Text和Value:
 // 设置Select的Value值为4的项选中
 $("#select_id ").val(4); //用这个 
 $("#select_id [value='4']").prop("selected", true);
 $("#select_id option[value='4']").prop("selected", true);
 //设置select中的第一个option被选中
 $("select :first").prop("selected", true);//这个
 $("select :first").prop("selected", 'selected'); 
 $("select option:first").prop("selected", "true"); 
 $("select option:first").prop("selected", "selected"); 

 //============================================================================================
 //jQuery添加/删除Select的Option项
 $("#select_id").append("<option value='Value'>Text</option>"); //为Select末尾追加一个Option(下拉项)
 $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select首部插入一个Option(第一个位置)
 $("#select_id :last").remove(); //删除Select中索引值最大Option(最后一个)
 $("#select_id :fist").remove(); //删除Select中索引值最小为0Option(第一个)
 $("#select_id [value='3']").remove(); //删除Select中Value='3'的Option

 });
 </script>
</head>
<table>
 <tr>
   <td>
    <!--multiple设定下拉框可以多选,size设定下拉框不呈现下拉方式,-->
    <select size="12" id="One" multiple="multiple">
     <option value='1'>苹果</option>
     <option value="2">香蕉</option>
     <option value="3">草莓</option>
     <option value="4">橘子</option>
    </select>
   </td>
   <td>
     <input type="button" value=">>>"><br>
     <input type="button" value=" > "><br>
     <input type="button" value=" < "><br>
     <input type="button" value="<<<"><br>

   </td>
   <td>
     <select size="12" id="two" multiple="multiple">
      <option value="5">葡萄</option>
     </select>

   </td>
   <td>
     <input type="button" value=" up "><br><br>
     <input type="button" value="down"><br>
   </td>
 </tr>
</table>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
JQuery实现图片轮播效果
May 08 #jQuery
jQuery中的deferred对象和extend方法详解
May 08 #jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 #jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
You might like
php常用Stream函数集介绍
2013/06/24 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php实现encode64编码类实例
2015/03/24 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python类属性的延迟计算
2016/10/22 Python
遗传算法之Python实现代码
2017/10/10 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
计算机专业毕业生求职信分享
2013/12/24 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
宾馆安全管理制度
2015/08/06 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python