Opérations en cascade pour les menus déroulants

Cet article présente principalement en détail le fonctionnement en cascade des menus déroulants et partage la classe d'outils pour la transmission interactive de données entre ajax et l'arrière-plan. Les amis intéressés peuvent se référer à

souvent utilisé dans le développement. rencontrera des opérations de menu en cascade, telles que : sélection de pays, de villes, de villages, etc. Lorsqu'un pays est sélectionné, le menu suivant répertorie les villes de ce pays. Lorsqu'une ville est sélectionnée, le menu suivant répertorie les villes correspondantes.

Je comprends deux façons de résoudre le fonctionnement en cascade de ce menu :

① Utilisez js pour l'implémenter et placez les données en cascade utilisées sur la page dans js Within, lorsque le La page est chargée, elle est affichée dans la sélection correspondante via js. Il existe de nombreuses solutions pour cette méthode, la plus intuitive consiste à la placer dans un tableau multidimensionnel. Tout le monde a une pensée différente, je n'entrerai donc pas dans les détails. ici Commentaire.

② Utilisez ajax pour charger de manière asynchrone et dynamique, puis affichez-le dans la sélection correspondante. Cette méthode est très pratique et est recommandée pour une utilisation en développement.

Regardons un petit exemple en développement :

Page courte JSP :

      <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>

Cette page comporte deux options : la classification des appareils et la sous-catégorie de l'appareil. La classification de l'appareil est le menu de premier niveau et la sous-catégorie de l'appareil est le menu de deuxième niveau. Le contenu d'affichage de la sous-catégorie de l'appareil est déterminé par la classification de l'appareil.

Regardons l'extrait de code ajax :

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

Il n'est pas difficile de voir que lorsque le le sélecteur de catégorie d'appareil est Après les modifications du contenu, déclenchez la fonction showCodeSubCate pour demander l'arrière-plan pour obtenir des données, puis ajoutez les données demandées à la sélection correspondant à la sous-classe d'appareil. L'implémentation du code de fond est la suivante (seules les méthodes du contrôleur sont publiées) :

@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;
  }

Ces deux méthodes correspondent respectivement aux deux ajax ci-dessus. , cela vaut la peine d'introduire les données renvoyées par l'arrière-plan. Le type de valeur de retour est Resultf7e83be87db5cd2d9a8a0b8117b38cd4. L'implémentation spécifique peut être consultée sur mon blog. ://www.cnblogs.com /blog411032/p/5799669.html

Classe d'outils pour ajax pour interagir avec l'arrière-plan pour transmettre des données

 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;
  }

}

Cette classe est une interaction front-end et back-end Offre une grande commodité :

Ce qui suit est l'interaction ajax entre le front-end et le backend :

Le code ajax frontal :

$.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("删除成功!");
        }
      }
    });

Ce qui suit est le code java d'arrière-plan :

  @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;
  }

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Chargement d'affichage AJAX et exemple de mise en œuvre d'une page d'occlusion de couche contextuelle

Formulaire de soumission Ajax La page sera toujours actualisé. Solution rapide au problème

solution rapide ajax au problème selon lequel le paramètre est trop long et ne peut pas être soumis avec succès

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!