ホームページ ウェブフロントエンド jsチュートリアル Ajax ドロップダウン メニューのカスケード操作

Ajax ドロップダウン メニューのカスケード操作

Apr 03, 2018 pm 03:21 PM
ajax ドロップダウンメニュー 操作する

今回は、Ajax の ドロップダウン メニュー のカスケード操作について説明します。 Ajax ドロップダウン メニューの の注意点 について、実際のケースを見てみましょう。

開発中、国、都市、町などの選択など、メニューのカスケード操作に遭遇することがよくあります。国を選択すると、次のメニューにその国の都市がリストされます。都市を選択すると、次のメニューに対応する町がリストされます。

このメニューのカスケード動作を解決するには2つの方法があります:

①jsを使用して実装し、ページで使用されているカスケードデータをjsに入れて、ページが読み込まれたときにjsを通して表示する 多くの解決策があります最も直感的な方法は、それを 多次元配列 に入れることです。考え方は人それぞれなので、ここでは詳しく説明しません。

②ajaxを使用して非同期かつ動的にロードし、対応するselectに表示するこの方法は非常に便利なので、開発での使用をお勧めします。

開発中の小さな例を見てみましょう:

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>
ログイン後にコピー

このページには、デバイス分類とデバイス サブカテゴリという 2 つのオプションが含まれます。デバイス分類は、第 1 レベルのメニューとデバイス サブカテゴリです。セカンダリメニューでは、デバイスサブカテゴリの表示内容はデバイスの分類によって決まります。

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 ='<option value="6801">--请选择--</option>';
        for(x in codeCates){
          str+='<option value="&#39;+codeCates[x]+&#39;">'+codeCates[x]+'</option>';
        }
        $("#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+='<option value="&#39;+codeCates[x]+&#39;">'+codeCates[x]+'</option>';
        }
        $("#codeSubCate").html(str);
      }
    });
  }
ログイン後にコピー
デバイス クラス セレクター

のコンテンツが変更されると、showCodeSubCate 関数がトリガーされてバックグラウンドでデータを取得するように要求され、要求されたデータがクラスに対応する選択内のデバイスサブに追加されます。バックグラウンド コードの実装は次のとおりです (コントローラー メソッドのみが掲載されています):

これら 2 つのメソッドは、それぞれ上記の 2 つの ajax リクエストに対応します。バックグラウンドによって返されるデータを導入する価値があります。戻り値の型は Result< です。 ;String> 値の型はツール クラスです。具体的な実装は、私のブログでご覧いただけます: http://www.cnblogs.com/blog411032/p/5799669.html

対話型の Ajax ツール クラス。バックグラウンドでのデータ送信

 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;
  }
}
ログイン後にコピー

このクラスは、フロントエンドとバックエンドの対話に非常に便利です:

以下は、フロントエンドとバックエンドの Ajax 対話です:

フロントエンド Ajax コード:

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

以下はバックエンド Java コードです:

  @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;
  }
ログイン後にコピー

この記事の事例を読んだ後は、このコードをマスターできたと思います。さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Ajax+mysqで都道府県・市区町村の3段階連携リストを実現


JsonとXMLデータのAjax送信手順を詳しく解説(コード付き)

以上がAjax ドロップダウン メニューのカスケード操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WPSテーブルにドロップダウンメニューを作成する方法 WPSテーブルにドロップダウンメニューを作成する方法 Mar 21, 2024 pm 01:31 PM

WPS テーブルのドロップダウン メニューの作成方法: ドロップダウン メニューを設定するセルを選択した後、「データ」、「有効性」の順にクリックし、ポップアップ ダイアログ ボックスで対応する設定を行います。メニューをプルダウンします。 WPS は強力なオフィス ソフトウェアとして、ドキュメントや統計データ テーブルなどを編集する機能を備えており、テキストやデータなどを扱う必要がある多くの人々にとって非常に便利です。 WPSソフトを上手に使って便利に使うためには、WPSソフトの基本的な操作をマスターする必要がありますが、今回は編集部がWPSソフトの使い方を紹介します。表示されるWPSテーブルのダウンメニュー操作を行います。 WPSフォームを開いたら、まず、

PyCharm の使用法チュートリアル: 操作の実行方法を詳しく説明します PyCharm の使用法チュートリアル: 操作の実行方法を詳しく説明します Feb 26, 2024 pm 05:51 PM

PyCharm は非常に人気のある Python 統合開発環境 (IDE) であり、Python 開発をより効率的かつ便利にするための豊富な機能とツールを提供します。この記事では、PyCharm の基本的な操作方法を紹介し、読者がすぐに使い始めてツールの操作に習熟できるように、具体的なコード例を示します。 1. PyCharm をダウンロードしてインストールします。 まず、PyCharm 公式 Web サイト (https://www.jetbrains.com/pyc) にアクセスする必要があります。

sudo とは何ですか?なぜ重要ですか? sudo とは何ですか?なぜ重要ですか? Feb 21, 2024 pm 07:01 PM

sudo (スーパーユーザー実行) は、一般ユーザーが root 権限で特定のコマンドを実行できるようにする、Linux および Unix システムの重要なコマンドです。 sudo の機能は主に次の側面に反映されています。 権限制御の提供: sudo は、ユーザーにスーパーユーザー権限を一時的に取得することを許可することで、システム リソースと機密性の高い操作を厳密に制御します。一般のユーザーは、必要な場合にのみ sudo を介して一時的な権限を取得できるため、常にスーパーユーザーとしてログインする必要はありません。セキュリティの向上: sudo を使用すると、日常的な操作中に root アカウントの使用を回避できます。すべての操作に root アカウントを使用すると、誤った操作や不注意な操作には完全な権限が与えられるため、予期しないシステムの損傷につながる可能性があります。そして

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

Linux Deployの操作手順と注意事項 Linux Deployの操作手順と注意事項 Mar 14, 2024 pm 03:03 PM

LinuxDeploy の操作手順と注意事項 LinuxDeploy は、ユーザーが Android デバイスにさまざまな Linux ディストリビューションを迅速に展開できるようにする強力なツールで、ユーザーはモバイル デバイスで完全な Linux システムを体験できます。この記事では、LinuxDeploy の操作手順と注意事項を詳しく紹介し、読者がこのツールをより効果的に使用できるように、具体的なコード例を示します。操作手順: Linux のインストールDeploy: まず、インストールします

Win10 起動パスワードの F2 キーを押すのを忘れた場合の対処方法 Win10 起動パスワードの F2 キーを押すのを忘れた場合の対処方法 Feb 28, 2024 am 08:31 AM

おそらく多くのユーザーは、自宅に未使用のコンピュータを複数台持っており、長期間使用していなかったためにパワーオン パスワードを完全に忘れてしまったため、パスワードを忘れた場合の対処方法を知りたいと考えています。それでは、一緒に見てみましょう。 win10 起動パスワードの F2 キーを押し忘れた場合の対処方法 1. コンピューターの電源ボタンを押し、コンピューターの電源を入れるときに F2 キーを押します (コンピューターのブランドによって、BIOS に入るボタンが異なります)。 2. BIOS インターフェイスで、セキュリティ オプションを見つけます (コンピューターのブランドによって場所が異なる場合があります)。通常は上部の設定メニューにあります。 3. 次に、「SupervisorPassword」オプションを見つけてクリックします。 4. この時点で、ユーザーは自分のパスワードを確認できると同時に、その横にある [有効] を見つけて [無効] に切り替えることができます。

Huawei Mate60 Proのスクリーンショット操作手順の共有 Huawei Mate60 Proのスクリーンショット操作手順の共有 Mar 23, 2024 am 11:15 AM

スマートフォンの普及に伴い、スクリーンショット機能は携帯電話を日常的に使用する上で必須のスキルの 1 つになりました。 Huaweiの主力携帯電話の1つであるHuawei Mate60Proのスクリーンショット機能は、当然のことながらユーザーの注目を集めています。今日は、誰もがより便利にスクリーンショットを撮れるように、Huawei Mate60Pro携帯電話のスクリーンショットの操作手順を共有します。まず、Huawei Mate60Pro携帯電話はさまざまなスクリーンショット方法を提供しており、個人の習慣に応じて自分に合った方法を選択できます。以下は、一般的に使用されるいくつかのインターセプトの詳細な紹介です。

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

See all articles