jQuery 선택 자동 선택 기능 구현 방법 분석

본 글에서는 jQuery 선택 자동 선택 기능의 구현 방식을 예시를 통해 분석해보았습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

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