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

话不多说，请看代码：

//直接保存后缀.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="&nbsp;>&nbsp;"><br>
     <input type="button" value="&nbsp;<&nbsp;"><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="&nbsp;up&nbsp;"><br><br>
     <input type="button" value="down"><br>
   </td>
 </tr>
</table>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# select下拉框选中 # jquery # 下拉框选中值 # select下拉框 # bootstrap可编辑下拉框jquery.editable-select # select下拉框插件jquery.editable-select详解 # 利用jquery获取select下拉框的值 # 基于jQuery的select下拉框选择触发事件实例分析 # jquery.multiselect多选下拉框实现代码 # jQuery制作简洁的多级联动Select下拉框 # jQuery操作select下拉框的text值和value值的方法 # jquery动态加载select下拉框示例代码 # jQuery操作选中select下拉框的值代码实例 # 第一个 # 多选 # 下拉框 # 是由 # 请选择 # 多说 # 首部 # 值为 # 所选 # 强烈建议 # Select # function # min # js

返回目录在线咨询

上一篇：python的range是什么
下一篇：选择适合外贸建站的高防服务器时应考虑哪些因素？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求