Maison > interface Web > Tutoriel H5 > le corps du texte

Comment utiliser le composant select dans jquery

php中世界最好的语言
Libérer: 2018-03-14 15:36:04
original
1952 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser le composant select dans jquery, et quelles sont les précautions d'utilisation du composant select dans jquery. Ce qui suit est un cas pratique, jetons un coup d'œil.

jquery obtient le texte et la valeur sélectionnés

Obtenir la sélection :

Obtenir le texte sélectionné :

$(“#ddlregtype”).find(“option:selected”).text();
Copier après la connexion

Obtenir la valeur sélectionnée :

$(“#ddlregtype “).val();
Copier après la connexion

Obtenir l'index sélectionné :

$(“#ddlregtype “).get(0).selectedindex;
Copier après la connexion

Définir la sélection :

Définir la sélection de l'index sélectionné :

$(“#ddlregtype “).get(0).selectedindex=index;//index为索引值
Copier après la connexion

Définir la valeur sélectionnée :

(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).val(“normal”); 
$(“#ddlregtype “).get(0).value = value;
Copier après la connexion

Définir la sélection du texte sélectionné :

var count=$("#ddlregtype option").length;
 for(var i=0;i<count;i++)
   {      if($("#ddlregtype ").get(0).options[i].text == text)
    {
      $("#ddlregtype ").get(0).options[i].selected = true;
      break;
    }
  }
$("#select_id option[text=&#39;jquery&#39;]").attr("selected", true);
Copier après la connexion

Définir l'option de sélection :

$("#select_id").append("<option value=&#39;value&#39;>text</option>"); //添加一项option
$("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index='0']").remove();//删除索引值为0的option
$("#select_id option[value='3']").remove(); //删除值为3的option
$("#select_id option[text='4']").remove(); //删除text值为4的option
Copier après la connexion

Effacer la sélection :

$("#ddlregtype ").empty();
Copier après la connexion

Besoins de travail, besoin Obtenez les valeurs à partir de deux formulaires. Comme le montre l'image :

Comment faire passer la valeur ajoutée de la zone de sélection de gauche à la zone de sélection de droite ? J'ai pensé à utiliser des effets spéciaux de page Web pour l'obtenir, et le jquery le plus populaire a été utilisé ici.

Le code js est le suivant :

//获取所有属性值 var item = $("#select1").val();
$(function(){
 $('#select1').each( //获得select1的所有值
   function(){
    $('button').click(function(){
      alert($('#select2').val()); //获得select2中的select1值
    });
   });
})
</script>
Copier après la connexion

Il est à noter qu'il ne peut pas être écrit directement sous la forme

$(function(){
 $('#select2').each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。
   function(){
    $('button').click(function(){
      alert($(this).val()); //获得select2中的select1值
    });
   });
})
Copier après la connexion

html :

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7

Vérifier à ajouter à droite>
Ajouter tout à droite>>

<<

Utilisez JQuery, Ajax pour appeler dynamique Remplissez l'option Sélectionner

//绑定ClassLevel1单击事件
  $("#ClassLevel1").change(function () {
    var id = $("#ClassLevel1").val();
    var level2 = $("#ClassLevel2");
    level2.empty();
    $("#ClassLevel3").hide();
    $.ajax({
      url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
      data: { "type": "ajax" },
      datatype: "json",
      type: "get",
      success: function (data) {
        var json = eval_r(data);
        for (var ind in json) {
          level2.append($(""));
        }
      }
    });
  })

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres éléments connexes. articles sur le site PHP chinois !

Lecture recommandée :

Comment obtenir l'effet de connexion avec retour chariot jquery

Cas et explication détaillée de l'événement de sortie de souris

Explication détaillée de l'utilisation de WebSocket

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal