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 Tree Multiselect使用详解
May 02 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jquery自定义组件实例详解
Dec 31 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实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python之re操作方法(详解)
2017/06/14 Python
Python3匿名函数用法示例
2018/07/25 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python实现画出e指数函数的图像
2019/11/21 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
初中地理教学反思
2014/01/11 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
学生感冒英文请假条
2014/02/04 职场文书
办公室主任职责范本
2014/03/07 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
严以律己学习心得体会
2016/01/13 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL