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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
yii2缓存Caching基本用法示例
2016/07/18 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python实现维吉尼亚加密法
2019/03/20 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python实现汇率转换操作
2020/05/03 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
党的群众路线学习材料
2014/05/16 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
2019消防宣传标语!
2019/07/10 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
python自动化测试通过日志3分钟定位bug
2021/11/20 Python