元のコードは次のとおりです。 <div class='コントロールグループ'> <label class='control-label' for='inputSelect'>所属ユニット</label> <div class='コントロール'> <select id='inputSelect' name="acCpname" onchange="updateAc()"> <c:forEach items="${list }" var="list"> <option value="${list.cpname}">${list.cpname }</option> </c:forEach> </選択> </div> </div> <div class='コントロールグループ'> <label class='control-label'>必須スタンプ</label> <div class='controls' id="updateac" style="height: 40px"> <c:if test="${空のシールテーブル}"> <label class='radio inline'> 利用できるスタンプがありません。スタンプを申請してください</label> </c:if> <c:if test="${空でないシールテーブル}"> <c:forEach items="${sealtables}" var="sealtable" varStatus="ステータス"> <label class='ラジオインライン'> <input type='チェックボックス' 名前 = "selectSealType" 値 = '${sealtable.sealtype}' /> ${シールテーブル.シールタイプ} </ラベル> </c:forEach> </c:if> </div> </div> エフェクトのスクリーンショット: この効果を実現するには、画像の赤くマークされた部分のドロップダウン リストをクリックします。ドロップダウン リストの変更に応じて、下のチェック ボックスの値も変更されます。 まず、解決策について説明します。ドロップダウン リストに onchange イベントを追加し、それを ajax 経由で非同期的にコントローラーに送信し、データベース クエリを実行してから、ModelAndView に戻ります。ModelAndView によって設定されるビューは新しい jsp ページであり、jsp ページに埋め込まれたコードは変更される div コードです。 ドロップダウン リストに onchange イベントを追加します。 時間に対する Ajax 非同期更新イベントを追加します。 返された押されたサーフェスはdivに直接ロードされます <スクリプト> 関数 updateAc() { $.ajax({ タイプ: "POST", url: '${pageContext.request.contextPath}/updateAc.action', データ : { 会社: $('#inputSelect').val() }, データ型: "html", キャッシュ: false、 非同期: true、 コンテンツタイプ: "application/x-www-form-urlencoded; 文字セット=utf-8", 成功: 関数(データ) { $("#updateac").html(データ); }, エラー: 関数() { } }); } </スクリプト> updateAc.action に送信します: ドロップダウンリストで選択された値に応じて、データベースから対応する情報が検索されて返され、comp.jspページがレンダリングされます。 @RequestMapping(値 = "/updateAc.action") パブリックModelAndView updateComp(HttpServletRequestリクエスト、モデルモデル){ ModelAndView modelAndView = 新しい ModelAndView(); 文字列 companyname = request.getParameter("company"); リスト<Sealtable> sealtables = service.sealTableBySealCpName(companyname); modelAndView.addObject("シールテーブル"、シールテーブル); modelAndView.setViewName("comp"); modelAndView を返します。 } .jsp: をコンパイルします。 <%@ ページ language="java" contentType="text/html; charset=UTF-8" ページエンコーディング="UTF-8"%> <%@ タグライブラリ uri="http://java.sun.com/jsp/jstl/core" プレフィックス="c"%> <%@ タグライブラリ uri="http://java.sun.com/jsp/jstl/fmt" プレフィックス="fmt"%> <%-- <%@ ファイル="model.jsp"%> を含めます --%> <div class='controls' id="updateac" style="margin-left: -20px;margin-top: -15px"> <c:if test="${空のシールテーブル}"> <label class='radio inline'> 利用できるスタンプがありません。スタンプを申請してください</label> </c:if> <c:if test="${空でないシールテーブル}"> <c:forEach items="${sealtables}" var="sealtable" varStatus="ステータス"> <label class='ラジオインライン'> <input type='チェックボックス' 名前 = "selectSealType" 値 = '${sealtable.sealtype}' /> ${シールテーブル.シールタイプ} </ラベル> </c:forEach> </c:if> </div> これで、ページの部分的な更新を実装できます。 要約する これで、ajax jquery を使用してページの div を更新する方法についてのこの記事は終了です。ajax jquery ページの div 更新の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linuxはデュアルネットワークカードボンドとドライバーインターフェースを使用する
少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...
1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...
MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...
1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...
私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...
以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...
この記事では、Docker の使用で最もよく使用されるイメージ コマンドとコンテナ コマンドを一覧表...
目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...
NGINX の全体的なアーキテクチャは、連携して動作する一連のプロセスによって特徴付けられます。メイ...
背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...
この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...