jQuery实现select下拉框获取当前选中的文本-js教程-PHP中文网

首页

web前端

js教程

jQuery实现select下拉框获取当前选中的文本

小云云

Jan 12, 2018 am 10:28 AM

jqueryselect获取

本文主要介绍了jQuery实现select下拉框获取当前选中文本、值、索引以及添加/删除Select的Option项的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。

话不多说，请看代码：

//直接保存后缀.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=&#39;4&#39;]").prop("selected", true);
 $("#select_id option[value=&#39;4&#39;]").prop("selected", true);
 //设置select中的第一个option被选中
 $("select :first").prop("selected", true);//这个
 $("select :first").prop("selected", &#39;selected&#39;); 
 $("select option:first").prop("selected", "true"); 
 $("select option:first").prop("selected", "selected"); 
 //============================================================================================
 //jQuery添加/删除Select的Option项
 $("#select_id").append("<option value=&#39;Value&#39;>Text</option>"); //为Select末尾追加一个Option(下拉项)
 $("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>"); //为Select首部插入一个Option(第一个位置)
 $("#select_id :last").remove(); //删除Select中索引值最大Option(最后一个)
 $("#select_id :fist").remove(); //删除Select中索引值最小为0Option(第一个)
 $("#select_id [value=&#39;3&#39;]").remove(); //删除Select中Value=&#39;3&#39;的Option
 });
 </script>
</head>
<table>
 <tr>
   <td>
    <!--multiple设定下拉框可以多选，size设定下拉框不呈现下拉方式，-->
    <select size="12" id="One" multiple="multiple">
     <option value=&#39;1&#39;>苹果</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>

相关推荐：

div+css模拟select下拉框实例代码

html中华支持分类Select下拉框的Optgroup标签

基于jQuery的select下拉框选择触发事件实例分析

以上是jQuery实现select下拉框获取当前选中的文本的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Java vs JavaScript：开发人员的详细比较May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。