jQueryでタグのサブ要素を追加して割り当てるメソッドを実装する

ここで、タグのサブ要素を追加および割り当てるための jQuery メソッドを共有します。これは優れた参考値であり、皆さんの役に立つことを願っています。

1. JSP ページで タグを次のように定義します:

<p>
<span>科室:</span>
<select class="dept-name-show" style="width: 70%;">
</select>
</p>

2. js ステートメントを記述します:

<script>
$(function () {
var dname = $(".dept-name-show").eq(0);//选定<select>标签
var url = "${pageContext.request.contextPath}/getDepts.do";//请求路径
$(".dept-name-show").click(function () {
$.get(
url,
function (res) {
var len = res.length;
var op = dname.children().length;
if (op < len) {
var pp = "<option></option>";
for (var i = 0; i < len; i++) {
dname.append(pp);
dname.children().eq(i).text(res[i].name);
}
}
}
)
})
})
</script>

3. 対応するリクエスト ステートメントを記述します:

List<Dept> deptList=null;
@RequestMapping(value = "/getDepts",method = {RequestMethod.GET})
public void getDepts(HttpServletResponse response) throws IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
if (deptList == null){
deptList = deptService.findAllDepts();
}else {
String res=JSON.toJSONString(deptList);
response.getWriter().write(res);
}
}

4番目に、効果は次のとおりです:

上記は私がまとめたものであり、将来的に皆さんに役立つことを願っています。

関連記事:

ngrok+expressを使用してWeChatインターフェイスのデバッグ問題を解決する方法

要素UIテーブルを使用してセルを編集可能にする方法

要素UIで、次の検証をクリアする方法ダイアログが閉じられました

以上がjQueryでタグのサブ要素を追加して割り当てるメソッドを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

jquery 要素 に追加

ソース：php.cn

前の記事：jQueryでPタグのテキスト値を変更する方法 次の記事：jsダイナミクスでタグを作成し、属性メソッドを設定する（詳細なチュートリアル）

このウェブサイトの声明

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

著者別の最新記事

• weebox でポップアップ ウィンドウが中央に配置されない問題
  2018-06-23 18:19:43
• vue+canvas で Excel のようなコンポーネントを使用する方法
  2018-06-23 18:17:39
• JavaScriptでクラスを呼び出す方法
  2018-06-23 18:11:37
• Vueフレームワークを使用したプルアップリフレッシュ機能の実装方法
  2018-06-23 18:10:14
• Vueモバイルターミナルを使用した画像切り抜きコンポーネントの実装方法
  2018-06-23 18:06:43
• WeChat ミニ プログラム テンプレートとモジュールの使用法について (詳細なチュートリアル)
  2018-06-23 18:04:28
• vue2にプルアップロード機能を実装する方法
  2018-06-23 18:02:45
• Vue2を使った3階層連携の実装方法
  2018-06-23 18:00:45
• vue2でデータリクエスト表示読み込みグラフを実装する方法
  2018-06-23 17:58:23
• エレメントフルスクリーンを使用して設定および監視する方法
  2018-06-23 17:56:41

最新の問題

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...

から 2024-04-05 09:26:49

0

1

1418

エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...

から 2024-04-04 18:40:04

0

1

3528

ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...

から 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...

から 2024-04-04 12:53:48

0

1

303

関連トピック

詳細>

• jqueryプラグインとは何ですか?
• Javaで配列要素の最大値と最小値を見つける方法
• jQueryでJSONを操作する方法
• jqueryで要素を削除する方法
• jQueryのhover()メソッドの使用
• jqueryはページングメソッドを実装します
• jqueryの隠し要素とは何ですか
• jQueryでハイライト表示されているもの

人気のおすすめ

• jsはどういう意味ですか
• jsで文字列を配列に変換するにはどうすればよいですか?
• JavaScriptを使用してページを更新する方法
• js配列内の項目を削除する方法
• sqrt関数の使い方

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417202
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4258073
• 
  JAVA 初心者向けビデオチュートリアル

  2478708
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  504071
• 
  PHP ゼロベースの入門チュートリアル

  844305

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1417202 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2478708 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  504071 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215304 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  877813 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6438 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5060 回の学習
• 
  Go言語実践GraphQL

  4260 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  633 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21629 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！