Kaskadierende Vorgänge für Dropdown-Menüs

Dieser Artikel stellt hauptsächlich die Kaskadenoperation von Dropdown-Menüs im Detail vor und teilt die Toolklasse für die interaktive Übertragung von Daten zwischen Ajax und dem Hintergrund. Interessierte Freunde können sich auf

beziehen, die häufig in der Entwicklung verwendet werden wird auf kaskadierende Menüoperationen stoßen, wie zum Beispiel: Auswahl von Ländern, Städten, Gemeinden usw. Wenn ein Land ausgewählt ist, werden im folgenden Menü die Städte in diesem Land aufgelistet. Wenn eine Stadt ausgewählt ist, werden im folgenden Menü die entsprechenden Städte aufgelistet.

Ich verstehe zwei Möglichkeiten, die Kaskadenoperation dieses Menüs zu lösen:

① Verwenden Sie js, um es zu implementieren, und fügen Sie die auf der Seite verwendeten Kaskadendaten in js ein Wenn die Seite geladen ist, wird sie in der entsprechenden Auswahl über js angezeigt. Die intuitivste Lösung besteht darin, sie in ein mehrdimensionales Array einzufügen. Daher werde ich nicht auf Details eingehen hier. Kommentar.

② Verwenden Sie Ajax zum asynchronen und dynamischen Laden und zeigen Sie es dann in der entsprechenden Auswahl an. Diese Methode ist sehr praktisch und wird für die Verwendung in der Entwicklung empfohlen.

Sehen wir uns ein kleines Beispiel in der Entwicklung an:

JSP-Kurzseite:

      <p class="form-group">
        <label class="col-sm-2 control-label">设备类别</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeCategory" onchange="showCodeSubCate()" id="codeCategory" style="width: 100%">
          
          </select>
        </p>
        <label class="col-sm-2 control-label">设备子类</label>
        <p class="col-sm-4">
          <select class="basic-single" name="codeSubCategory" id="codeSubCate" disabled="disabled" style="width: 100%">
            <option value="">--请选择--</option>
          </select>
        </p>
</p>

Diese Seite umfasst zwei Optionen: Geräteklassifizierung und Geräteunterkategorie. Die Geräteklassifizierung ist das Menü der ersten Ebene und die Geräteunterkategorie ist das Menü der zweiten Ebene. Der Anzeigeinhalt der Geräteunterkategorie wird durch die Geräteklassifizierung bestimmt.

Sehen wir uns das Ajax-Code-Snippet an:

function addCodeCategory(){
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeCategory",
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        str =&#39;<option value="6801">--请选择--</option>&#39;;
        for(x in codeCates){
          str+=&#39;<option value="&#39;+codeCates[x]+&#39;">&#39;+codeCates[x]+&#39;</option>&#39;;
        }
        $("#codeCategory").html(str);
        
      }
    });
  }
  
  function showCodeSubCate(){
    $("#codeSubCate").prop("disabled","");//将设备子类的select解除锁定
    var target = $("#codeCategory option:selected").text();
    $.ajax({
      url: "<%=request.getContextPath()%>/facilitydict/showCodeSubCategory",
      data : {codeCategory:target},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(result) {
        result = $.parseJSON(result);
        var data = result.data;
        var codeCates = data.split(",");
        var str="";
        for(x in codeCates){
          str+=&#39;<option value="&#39;+codeCates[x]+&#39;">&#39;+codeCates[x]+&#39;</option>&#39;;
        }
        $("#codeSubCate").html(str);
      }
    });
  }

Das ist nicht schwer zu erkennen, wenn der Inhalt in Der Gerätekategorieselektor Nach der Änderung wird die Funktion showCodeSubCate ausgelöst, um den Hintergrund zum Abrufen von Daten anzufordern. Anschließend werden die angeforderten Daten der Auswahl hinzugefügt, die der Geräteunterklasse entspricht. Die Implementierung des Hintergrundcodes ist wie folgt (nur die Controller-Methoden werden veröffentlicht):

@RequestMapping("/showCodeCategory")
  @ResponseBody
  public Result<String> searchCodeCategory() {

    Result<String> rs = new Result<>();
    List<String> codeCategorys = facilityDictService.searchCodeCategory();
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys);
    rs.setData(codeCate);
    return rs;

  }

  @RequestMapping("/showCodeSubCategory")
  @ResponseBody
  public Result<String> searchCodeSubCategory(HttpServletRequest request) {
    String codeCategory = request.getParameter("codeCategory");
    Result<String> rs = new Result<>();
    List<String> codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory);
    String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys);
    rs.setData(codeCate);
    return rs;
  }

Diese beiden Methoden entsprechen jeweils den beiden Ajax-Anfragen Oben ist es wert, dass der vom Hintergrund zurückgegebene Datentyp „Result“ ist. Die spezifische Implementierung kann in meinem Blog eingesehen werden ://www.cnblogs.com/blog411032 /p/5799669.html

Ajax-Toolklasse für interaktive Datenübertragung mit dem Hintergrund

 public class Result<T> implements Serializable {

  private static final long serialVersionUID = 3637122497350396679L;

  private boolean success;
  private T data;
  private String msg;

  public Result() {
  }

  public Result(boolean success) {
    this.success = success;
  }

  public boolean isSuccess() {
    return success;
  }

  public void setSuccess(boolean success) {
    this.success = success;
  }

  public T getData() {
    return data;
  }

  public void setData(T data) {
    this.data = data;
  }

  public String getMsg() {
    return msg;
  }

  public void setMsg(String msg) {
    this.msg = msg;
  }

  public Result(boolean success, String msg) {
    super();
    this.success = success;
    this.msg = msg;
  }

  public Result(boolean success, T data) {
    super();
    this.success = success;
    this.data = data;
  }

}

Diese Klasse bietet eine sehr große Plattform für die Front-End- und Back-End-Interaktion. Bequemlichkeit:

Das Folgende ist die Ajax-Interaktion zwischen Front- und Backend:

Die Front-End-Ajax-Code:

$.ajax({
      url: "<%=request.getContextPath()%>/supp/deleteSupp",
      data : {supplierId:supplierId},
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      type: "GET",  //请求方式
      success: function(data) {
        var rs = eval(&#39;(&#39;+data+&#39;)&#39;);
        flag = rs.success;
        if(flag){
          alert("删除成功!");
        }
      }
    });

Das Folgende ist der Hintergrund-Java-Code:

  @RequestMapping("/deleteSupp")
  @ResponseBody
  public Result<String> deleteSupplier(HttpServletRequest request){
    Result<String> rs = new Result<>();
    String supplierId = request.getParameter("supplierId");
    supplierService.deleteSupplierById(supplierId);
    rs.setSuccess(true);
    return rs;
  }

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

AJAX-Anzeigenlade- und Popup-Layer-Okklusionsseite-Implementierungsbeispiel

Ajax-Übermittlungsformular Die Seite wird weiterhin aktualisiert. Schnelle Lösung des Problems

Ajax-Schnelllösung des Problems, dass der Parameter zu lang ist und nicht erfolgreich übermittelt werden kann

Das obige ist der detaillierte Inhalt vonKaskadierende Vorgänge für Dropdown-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!