Dynamisches kaskadierendes Laden des UI-Dropdown-Felds in einfacher Weise

In diesem Artikel wird hauptsächlich der Beispielcode für das dynamische Kaskadenladen der EasyUI-Dropdown-Box vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen.

Das Dropdown-Feld von Easyui lädt die Daten dynamisch. In Hochschulen und Universitäten müssen zuerst alle Hochschulen abgefragt werden, und dann werden die Kurse entsprechend der Hochschule dynamisch geladen. Mal sehen, wie wir das erreichen.

1. Schnittstelleneffekt

2. HTML + JS-Code

<span>学院名称：</span> 
<input class="easyui-combobox" style="width:30%;" id="collegeName"> 
<span>课程名称：</span> 
<input class="easyui-combobox" style="width:30%;" id="courseName"><br/>

3. Backend-Code

$(function() {    
   // 下拉框选择控件，下拉框的内容是动态查询数据库信息 
   $('#collegeName').combobox({  
       url:'${pageContext.request.contextPath}/loadInstitution',  
       editable:false, //不可编辑状态 
       cache: false, 
       panelHeight: '150', 
       valueField:'id',   
       textField:'institutionName', 
        
    onHidePanel: function(){ 
      $("#courseName").combobox("setValue",'');//清空课程 
      var id = $('#collegeName').combobox('getValue');     
      //alert(id); 
       
     $.ajax({ 
      type: "POST", 
      url: '${pageContext.request.contextPath}/loadCourse?id=' + id, 
      cache: false, 
      dataType : "json", 
      success: function(data){ 
      $("#courseName").combobox("loadData",data); 
           } 
        });    
       } 
});   
    
   $('#courseName').combobox({  
     //url:'itemManage!categorytbl',  
     editable:false, //不可编辑状态 
     cache: false, 
     panelHeight: '150',//自动高度适合 
     valueField:'id',   
     textField:'courseName' 
     }); 
    
});

entsprechend Die von der Stiftung bereitgestellte Schnittstelle fragt Hochschulen und Kurse ab, konvertiert sie in das JSON-Format und bindet sie an die Front-End-Steuerung.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwendung von Electron zum Erstellen von React+Webpack-Desktopanwendungen (ausführliches Tutorial)

So implementieren Sie es in WeChat mini Programm Nach links oder rechts wischen

Was sind die speziellen Datentypen in JavaScript

So verwenden Sie Ajax, um Serverdaten im WeChat-Applet anzufordern

Das obige ist der detaillierte Inhalt vonDynamisches kaskadierendes Laden des UI-Dropdown-Felds in einfacher Weise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!