Analysis on the implementation method of jQuery select automatic selection function-JS Tutorial-php.cn

Analysis on the implementation method of jQuery select automatic selection function

高洛峰

Release： 2017-01-03 16:32:24

Original

1245 people have browsed it

This article analyzes the implementation method of jQuery select automatic selection function through examples. Share it with everyone for your reference, the details are as follows:

//筛选
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);

Copy after login

After obtaining the value, the setting is automatically selected.

After selection, call the change() method. The change method will display the next level select box. Then select it again and call the change() method. In this way, all the three-level select boxes are displayed and selected by default.

$(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();
  }
}

Copy after login

I hope this article will be helpful to everyone in jQuery programming.

For more jQuery select automatic selection function implementation method analysis and related articles, please pay attention to the PHP Chinese website!