jQuery select自動選択機能の実装方法の解析

この記事では、jQuery select 自動選択機能の実装方法を例を通して分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

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

値を取得したら、自動的に選択されるように設定します。

選択後、change()メソッドを呼び出します。変更方法により、次のレベルの選択ボックスが表示されます。次に、それを再度選択し、change() メソッドを呼び出します。このようにして、デフォルトで 3 レベルの選択ボックスがすべて表示および選択されます。

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

この記事が jQuery プログラミングの皆様のお役に立てれば幸いです。

jQuery select 自動選択機能の実装方法分析関連記事の詳細については、PHP 中国語 Web サイトに注目してください。