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操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery实现图片放大镜效果
Dec 23 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
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Python语言实现将图片转化为html页面
2017/12/06 Python
python实现C4.5决策树算法
2018/08/29 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
2019年Java 最常见的 面试题
2016/10/19 面试题
毕业学生推荐信
2013/12/01 职场文书
求职信内容怎么写
2014/05/26 职场文书
数学教育专业求职信
2014/07/22 职场文书
授权委托书怎么写
2014/09/25 职场文书
商品陈列协议书
2014/09/29 职场文书
大学生年度个人总结
2015/02/15 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
上班旷工检讨书
2015/08/15 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL