Home >Web Front-end >JS Tutorial >jQuery implements select drop-down box to obtain the currently selected text

jQuery implements select drop-down box to obtain the currently selected text

小云云Original: 2018-01-12 10:28:163435browse

This article mainly introduces the relevant knowledge of jQuery to implement the select drop-down box to obtain the currently selected text, value, index and add/delete the Option items of Select. It has a good reference value. Let's take a look with the editor below, I hope it can help everyone.

Without further ado, please take a look at the code:

//直接保存后缀.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>

Related recommendations:

##div+css simulated select drop-down box example code

htmlChina supports the Optgroup tag of the classified Select drop-down box

JQuery-based select drop-down box selection trigger event instance analysis

The above is the detailed content of jQuery implements select drop-down box to obtain the currently selected text. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About jquery smooth scrolling to the top plug-inNext article：About jquery smooth scrolling to the top plug-in

See more

jQuery implements select drop-down box to obtain the currently selected text

Related articles