Maison > interface Web > js tutoriel > Analyse de la méthode de mise en œuvre de la fonction de sélection automatique jQuery select

Analyse de la méthode de mise en œuvre de la fonction de sélection automatique jQuery select

高洛峰
Libérer: 2017-01-03 16:32:24
original
1253 Les gens l'ont consulté

Cet article analyse la méthode d'implémentation de la fonction de sélection automatique de jQuery select à travers des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

//筛选
var typeid = "<!--{$typeid}-->";
var bigclassid = "<!--{$bigclassid}-->";
var smallclassid = "<!--{$smallclassid}-->";
$("#typeid option[value="+typeid+"]").attr("selected",true);
$("#typeid").change();
$("#bigclassid option[value="+bigclassid+"]").attr("selected",true);
$("#bigclassid").change();
$("#smallclassid option[value="+smallclassid+"]").attr("selected",true);
Copier après la connexion

Après avoir obtenu la valeur, le paramètre est automatiquement sélectionné.

Après la sélection, appelez la méthode change(). La méthode de changement affichera la boîte de sélection de niveau suivant. Sélectionnez ensuite à nouveau et appelez la méthode change(). De cette manière, toutes les cases de sélection à trois niveaux sont affichées et sélectionnées par défaut.

$(document).ready(function(){
  //ajax级联
  $("#typeid").change(function(){
    var id = $(this).val();
    setbigclass(id);
  });
  $("#bigclassid").change(function(){
    var id = $(this).val();
    setsmallclass(id);
  });
  $("#screen_submit").click(function(){
    $("#screenform").submit();
  });
});
function setbigclass(id){
    var res = ajaxgetbigclass(id);
    if(res){
      myobj = eval(res);
      var strHtml="<option value=0>全部大类</option>";
      for(var i=0;i<myobj.length;i++){
          strHtml+="<option value=&#39;"+myobj[i].id+"&#39;>"+myobj[i].name+"</option>";
      }
      $("#bigclassid").html(strHtml);
      $("#bigclassid").show().change();
    }else{
      $("#bigclassid").html(&#39;<option value=""></option>&#39;).hide();
      $("#smallclassid").html(&#39;<option value=""></option>&#39;).hide();
    }
}
function setsmallclass(id){
    var res = ajaxgetsmallclass(id);
    if(res){
      myobj = eval(res);
      var strHtml="<option value=0>全部子类</option>";
      for(var i=0;i<myobj.length;i++){
          strHtml+="<option value=&#39;"+myobj[i].id+"&#39;>"+myobj[i].name+"</option>";
      }
      $("#smallclassid").html(strHtml);
      $("#smallclassid").show();
    }else{
      $("#smallclassid").html(&#39;&#39;).hide();
  }
}
Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la programmation jQuery.

Pour plus d'analyses de la méthode de mise en œuvre de la fonction de sélection automatique de sélection jQuery et d'articles connexes, veuillez faire attention au site Web PHP 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