ループで表示内容を回しているセレクトのデータを、BootStrapのモーダルに表示させたい

Question

前提・実現したいこと

ループさせてデータを表示させているセレクトタグで選択された内容を、一つのボタン押下時に呼び出されるモーダル内に表示させたいのですがデータの受け渡しがされずに困っています。どのような方法でデータを取得できるのか教えていただきたいです。

発生している問題・エラーメッセージ

モーダルにデータが渡らない。渡し方がわからない。

試したThymeleafのコード

<form th:action="@{/tablet-visitor/select-user}"
							class="form-inline justify-content-center needs-validation"
							method="post" novalidate>

							<div class="form-inline">

								<div class="search-box form-group mb-2 ml-2">
									<select class="chosen-select form-control" id="emp">
										<option value="" style="font-weight: 100;">部署選択</option>
										<option th:each="dep:${dlist}"
											th:text="${dep.deployment_name}" th:value="${dep.id}"></option>
									</select>
								</div>

								<div class="form-group mb-2 ml-2 mr-5">

									<select class="chosen-select form-control list" th:name="emp"
										required>
										<option value="">氏名選択</option>
										<option class="list_item" th:each="user:${ulist}"
											th:text="${user.emp_name}"
											th:data-emp="${user.deployment_id}" th:value="${user.id}"
											th:data-mail="${user.empMail}" th:data-name="${user.emp_name}" data-target="#tabModal"></option>

									</select>

								</div>


							</div>

							<div class="ml-1 mt-5">
								<a
									class="btn btn btn-primary text-center deletemodalbtn open-AddBookDialog text-light"
									data-toggle="modal" data-target="#tabModal">入力完了
								</a>

								<div class="modal fade" id="tabModal" tabindex="-1"
									role="dialog" aria-labelledby="exampleModalCenterTitle"
									aria-hidden="true">
									<div class="modal-dialog modal-dialog-centered" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5>
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<div class="modal-body">
												<p>こちらの担当者であっていますか？</p>
												メールアドレス：
												<p id="mail-mail"></p>
												担当者名：
												<p id="name-name"></p>
											</div>
											<div class="modal-footer">
												<a href="" type="button" class="btn btn-secondary"
													data-dismiss="modal">キャンセル</a>
												<button type="submit" class="btn btn-primary">OK</button>
											</div>
										</div>
									</div>
								</div>

							</div>



						</form>

試したJavaScript

 $('#tabModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
        var mail = button.data('mail') //data-mail の値を取得
        var name = button.data('name')//data-nameの値を取得

        //Ajaxの処理はここに

        var modal = $(this) //モーダルを取得
        modal.find('.modal-body p#mail-mail').text(mail) //ｐタグにも表示
        modal.find('.modal-body p#name-name').text(name)


    });

試したこと

JavaScriptを用いてデータを取得しようと考えたのですが、th:data-mail="${user.empMail}" th:data-name="${user.emp_name}"がth:each="user:${ulist}"のループの外にあると、データを参照できず、中に入れようと考えてもボタンが複数できてしまい実現できませんでした。
何卒宜しくお願い致します。

Answer 1

selectの実装で指摘事項があります。

<select class="chosen-select form-control" id="emp">
  <option value="" style="font-weight: 100;">部署選択</option>

部署選択なのですから emp ではないかと。

<select class="chosen-select form-control list" th:name="emp" required>
  <option value="">氏名選択</option>

氏名なので、これも emp ではないのと、name属性は不適切です。

なお、HTML内のid属性は、他と重複してはいけません。

モーダルダイアログ起動時に実装されているJavaScriptが押したbuttonから名前や氏名を取得していますが、これは実装したいことと実装内容が違います。<select>で選んだ内容を取得したいのですから、ボタンとは関係なく、jQueryの$("#対象とする要素のid値")で要素を選べば良いでしょう。

Comments

[kazu5942]

ご回答いただきまして誠にありがとうございます。に
selectで選択された社員のメールと名前、二つのデータを送りたい場合、optionにvalueを二つ持たせることは可能なのでしょうか？selectの書き方と、jQueryの$("#対象とする要素のid値")についてもう少し詳しく教えていただけますでしょうか。

[A-pZ]

selectは2つありますので、1つのoptionに2つのvalueをつけるのも良くありません。ボタンを押したときに現在selectで選ばれている値をそれぞれ取得すればよいのですから、ボタンから値を取得するのではなく、jQueryの$("#要素id")で取得すればよいです。jQueryの要素を取得する方法については、さまざまなドキュメントがありますのでお好みのものをお使いください。

jquery id セレクタ

で検索されると良いでしょう。

[kazu5942]

th:dataに持たせることで解決させることができました！ありがとうございます。