Maison > interface Web > js tutoriel > le corps du texte

Comment faire fonctionner la sélection avec jquery ?

青灯夜游
Libérer: 2019-11-23 17:37:32
avant
1847 Les gens l'ont consulté

Comment faire fonctionner la sélection avec jquery ? L'article suivant vous présentera comment utiliser jquery pour effectuer la sélection (obtenir la valeur, définir la sélection). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment faire fonctionner la sélection avec jquery ?

1. Problèmes de valeur de base

Par exemple<select class="selector"></select>

1. l'élément

$(".selector").val("pxx");
Copier après la connexion

2. Définissez le texte sur pxx et sélectionnez l'élément

$(".selector").find("option:contains(&#39;pxx&#39;)").attr("selected",true);
Copier après la connexion

Remarque  : La méthode d'écriture précédente de $(".selector").find("option[text=&#39;pxx&#39;]").attr("selected",true); était actuellement erronée. a confirmé que l'entrée prend en charge ceci. Un moyen d'obtenir la valeur de l'attribut : "input[text=&#39;pxx&#39;]", vous avez besoin de "option:contains(&#39;pxx&#39;)" pour l'obtenir dans select.

Voici une utilisation des crochets. Le signe égal entre crochets est précédé du nom de l'attribut sans guillemets. Souvent, l’utilisation de crochets peut rendre la logique très simple.

3. Obtenir la valeur de l'élément actuellement sélectionné

$(".selector").val();
Copier après la connexion

4. Obtenir le texte de l'élément actuellement sélectionné

$(".selector").find("option:selected").text();
Copier après la connexion

Les deux points sont utilisés ici et maîtriser son utilisation. tirer des conclusions sur d’autres cas sera également utile. Le code devient concis.

2. La cascade de select est souvent utilisée, c'est-à-dire que la valeur de la deuxième sélection change avec la valeur sélectionnée par la première sélection. C'est très simple en jquery.

Tels que :

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中,这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});
Copier après la connexion

3. jQuery obtient le texte et la valeur sélectionnés par Select :

Explication de la grammaire :

$("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值
Copier après la connexion

4. jQuery définit le texte et la valeur de Select :

Explication de la grammaire :

$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   // 设置Select的Value值为4的项选中
$("#select_id option[text=&#39;jQuery&#39;]").attr("selected", true);   //设置Select的Text值为jQuery的项选中
Copier après la connexion

5. jQuery ajoute/supprime l'élément Option de Select :

Explication de la grammaire :

$("#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 option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index=&#39;0&#39;]").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value=&#39;3&#39;]").remove();  //删除Select中Value=&#39;3&#39;的Option
$("#select_id option[text=&#39;4&#39;]").remove();  //删除Select中Text=&#39;4&#39;的Option
Copier après la connexion

6. valeur radio jquery, valeur de case à cocher, valeur de sélection, sélection radio, sélection de case à cocher, sélection de sélection et < associées. 🎜>

1 Obtenez la valeur d'un ensemble d'éléments radio sélectionnés

var item = $(&#39;input[name=items][checked]&#39;).val();
Copier après la connexion

2 Obtenez le texte de l'élément sélectionné

var item = $("select[name=items] option[selected]").text();
Copier après la connexion

3 Le deuxième élément de la liste déroulante de sélection est Valeur actuellement sélectionnée

$(&#39;#select_id&#39;)[0].selectedIndex = 1;
Copier après la connexion

4 Le deuxième élément du groupe radio radio est la valeur actuellement sélectionnée

$(&#39;input[name=items]&#39;).get(1).checked = true;
Copier après la connexion

7. Obtenez la valeur  :

texte zone de texte :

$("#txt").attr("value");

Box de sélection multiple :

$("#checkbox_id").attr("value");

Radio de groupe à sélection unique :

$("input[type=radio][checked]").val();

Box de sélection déroulante :

$(&#39;#sel&#39;).val();

8. Contrôler les éléments du formulaire :

Zone de texte, zone de texte :

$("#txt").attr("value",&#39;&#39;);//清空内容 
$("#txt").attr("value",&#39;11&#39;);//填充内容
Copier après la connexion

Box à sélection multiple :

$("#chk1").attr("checked",&#39;&#39;);//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr(&#39;checked&#39;)==undefined) //判断是否已经打勾
Copier après la connexion

Radio du groupe de radio :

$("input[type=radio]").attr("checked",&#39;2&#39;);//设置value=2的项目为当前选中项
Copier après la connexion

Liste déroulante de sélection :

$("#sel").attr("value",&#39;-sel3&#39;);//设置value=-sel3的项目为当前选中项 
$("<option value=&#39;1&#39;>1111</option><option value=&#39;2&#39;>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty();//清空下拉框
Copier après la connexion

9. Déterminez s'il existe une option pour une certaine valeur dans la sélection :

function is_Exists(selectid,value){
  var theid=&#39;#&#39;+selectid;
  var count=$(theid).get(0).options.length;
  var isExist = false;
  for(var i=0;i<count;i++){
    if ($(theid).get(0).options[i].value == value){
      isExist=true;
      break;
    }
  }
  return isExist;
}
Copier après la connexion
Apprentissage recommandé :

Tutoriel jQuery

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:cnblogs.com
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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!