jQuery implémente la liste déroulante de sélection pour obtenir le texte actuellement sélectionné-js tutoriel-php.cn

jQuery implémente la liste déroulante de sélection pour obtenir le texte actuellement sélectionné

小云云

Libérer： 2018-01-12 10:28:16

original

3449 Les gens l'ont consulté

Cet article présente principalement les connaissances pertinentes de jQuery pour implémenter la liste déroulante de sélection pour obtenir le texte, la valeur, l'index actuellement sélectionnés et ajouter/supprimer les éléments d'option de Select. Il a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous, j'espère que cela pourra aider tout le monde.

Pas grand chose à dire, veuillez jeter un oeil au 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>

Copier après la connexion

Recommandations associées :

div+css simulé select drop- exemple de code de la boîte vers le bas

html La Chine prend en charge la balise Optgroup de la catégorie Boîte déroulante de sélection

Boîte déroulante de sélection basée sur JQuery analyse d'instance d'événement déclencheur de sélection

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!