Maison  >  Article  >  interface Web  >  JQuery sélectionne la méthode de valeur sélectionnée du composant sélectionné

JQuery sélectionne la méthode de valeur sélectionnée du composant sélectionné

亚连
亚连original
2018-05-31 17:00:091721parcourir

Ci-dessous, je partagerai avec vous un article sur la méthode de sélection de valeur du composant de sélection JQuery. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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

Obtenir la sélection :

Obtenir le texte sélectionné :

$(“#ddlregtype”).find(“option:selected”).text();

Obtenir la valeur sélectionnée :

$(“#ddlregtype “).val();

Obtenir l'index sélectionné :

$(“#ddlregtype “).get(0).selectedindex;

Définir la sélection :

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

$(“#ddlregtype “).get(0).selectedindex=index;//index为索引值

Définir la valeur sélectionnée :

(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).val(“normal”); 
$(“#ddlregtype “).get(0).value = value;

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);

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=&#39;0&#39;]").remove();//删除索引值为0的option
$("#select_id option[value=&#39;3&#39;]").remove(); //删除值为3的option
$("#select_id option[text=&#39;4&#39;]").remove(); //删除text值为4的option

Effacer la sélection :

$("#ddlregtype ").empty();

Besoins de travail, nécessité d'obtenir les valeurs 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(){
 $(&#39;#select1&#39;).each( //获得select1的所有值
   function(){
    $(&#39;button&#39;).click(function(){
      alert($(&#39;#select2&#39;).val()); //获得select2中的select1值
    });
   });
})
</script>

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

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

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 les options de Sélection

//绑定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($("<option value=&#39;" + json[ind].id + "&#39;>" + json[ind].typename + "</option>"));
        }

      }
    });
  })

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Vue.js déplace la position du tableau et met à jour la vue en même temps

vue.js ou js implémente la méthode de tri chinoise A-Z

Exemple de code du serveur de fichiers statiques de nœud réel

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!

Déclaration:
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