セレクトボックスの値をAjaxでPOSTする（jQuery）

#質問者のレベル感
業務に入って４か月目の駆け出し。JavaScriptを扱うのは初めてで、記事を参考にしながら進めている形です。
言語はJava、IDEはEclipseを使用しております。

Java:14
jQuery:3.3.1

#発生している問題
表題の通り、セレクトボックスの選択をトリガーとしてAjax通信を行おうとしたところ、JS側の変数に値が渡っておらずundefinedという状態になる問題で困っています。

#対処
(1)デバッグによりJSP側に想定している値が飛んでいることは確認済み。
(2)Javascript側でchange,clickどちらも試したが同じ状態
(3)data属性を飛ばしたい各要素に振ってJSで取得するパターン、data属性で飛ばす値を配列化させて取得するパターンを検
証したがどちらも同じ状態。
(4)検証により通信そのものは行っていることは確認済み。

#仮説
私はoptionのどの要素を選択しているのかJS側で判別できないために現在の状態になっていると考えております。
なぜなら、検証で渡してきた変数の中身を確認したところ、optionタグではなくselectタグの情報を表示していたからです。

#ソース・エラー

JSP
1 一部抜粋
2
3<%
4    @SuppressWarnings("unchecked")
5		List<User> user = (List<User>) session.getAttribute("userList");
6	@SuppressWarnings("unchecked")
7		List<ApplicationHolidayOfOneUser> applicationPaidHolidayList = (List<ApplicationHolidayOfOneUser>) request.getAttribute("applicationPaidHolidayList");
8	@SuppressWarnings("unchecked")
9	List<FindAllApplicationStatus>applicationStatusList = (List<FindAllApplicationStatus>)request.getAttribute("applicationStatusList");
10%>
11
12<!DOCTYPE html>
13<html lang="ja">
14<head>
15<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
16<!-- Bootstrap css -->
17<link rel="stylesheet"
18	href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
19	integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
20	crossorigin="anonymous">
21<link
22	href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700"
23	rel="stylesheet">
24
25<!-- jQuery -->
26<script src="https://code.jquery.com/jquery-3.3.1.min.js"
27	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
28	crossorigin="anonymous"></script>
29<!-- popper.js -->
30<script
31	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
32	integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
33	crossorigin="anonymous"></script>
34<!-- bootstrap.js -->
35<script
36	src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
37	integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
38	crossorigin="anonymous"></script>
39<!-- font awesome -->
40<link
41	href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
42	rel="stylesheet">
43
44<link
45	href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"
46	rel="stylesheet" />
47<script
48	src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
49
50<style><%@include file="/WEB-INF/css/allowPaidHoliday.css" %></style>
51<script><%@include file="/WEB-INF/js/allowPaidHoliday.js" %></script>
52
53
54
55</head>
56
57<body>
58	<%  
59		@SuppressWarnings("unchecked")
60		List<CurrentRemainHolidayOfAuthority> currentRemainHolidayList = (List<CurrentRemainHolidayOfAuthority>) request
61	    .getAttribute("currentRemainHolidayList");
62	%>
63	<%
64		for (int i = 0; i < currentRemainHolidayList.size(); i++) {
65		CurrentRemainHolidayOfAuthority row = (CurrentRemainHolidayOfAuthority) currentRemainHolidayList.get(i);
66	%>
67	<label for="userName">社員氏名：</label>
68	<h3 id="userName"><%=row.getUserName()%></h3>
69
70	<label>有給残日数：<%=row.getRemainHoliday()%>日
71	</label>
72	<%
73		}
74	%>
75	
76		<table class="applicatingTable  table table-hover" width="100%">
77			<thead class="thead-light">
78				<div class="tableTitle">申請中有給一覧</div>
79				<tr>
80					<th scope="col">申請日</th>
81					<th scope="col">有給開始日</th>
82					<th scope="col">有給終了日</th>
83					<th scope="col">取得期間</th>
84					<th scope="col">承認ステータス</th>
85					<th scope="col"></th>
86				</tr>
87			</thead>
88			<tbody>
89				<%
90					for (int i = 0; i < applicationPaidHolidayList.size(); i++) {
91					ApplicationHolidayOfOneUser row = (ApplicationHolidayOfOneUser) applicationPaidHolidayList.get(i);
92				%>
93				<tr style="text-align: center;">
94					<td><input class="appDate" name="appDate" type="text"
95						value="<%=row.getApplicationDate()%>" size="20" readonly
96						style="width: 100%; box-sizing: border-box; border: none"></td>
97					<td><input class="stHoliday" name="stHoliday" type="text"
98						value="<%=row.getStartHoliday()%>" size="20" readonly
99						style="width: 100%; box-sizing: border-box; border: none"></td>
100					<td><input class="endHoliday" name="endHoliday" type="text"
101						value="<%=row.getEndHoliday()%>" size="20" readonly
102						style="width: 100%; box-sizing: border-box; border: none"></td>
103					<td><input class="reason" name="reason" type="text"
104						value="<%=row.getUseHoliday()%>" size="20" readonly
105						style="width: 100%; box-sizing: border-box; border: none"></td>
106					<td>
107					<form method="post" action="ApplicationHolidayOfOneUser">
108						<select class="form-control applicationStatus" name="applicationStatus" >
109							<option value=null disabled selected>選択してください</option>	
110							<%
111								FindAllApplicationStatus approval = applicationStatusList.get(2);
112								FindAllApplicationStatus remand = applicationStatusList.get(3);
113							%>
114							<option class="select" data-numbers='["<%=approval.getId() %>","<%=row.getPaidHolidayId()%>","<%=row.getUserId() %>"]'>
115							<%=approval.getApplicationStatus() %></option>
116						
117							<option class="select" data-numbers='["<%=remand.getId() %>","<%=row.getPaidHolidayId()%>","<%=row.getUserId() %>"]'><%=remand.getApplicationStatus() %></option> 
118						</select>
119					</form>
120					</td>
121					<td><form method="post" action="ApplicationHolidayOfOneUser"><button class="btn btn-danger" type="submit" name="paidHolidayId" 
122							value=<%=row.getPaidHolidayId() %>>削除</button><input type="hidden" name="userId" value=<%=row.getUserId()%>></form>
123					</td>
124				</tr>
125			</tbody>
126			<%
127				}
128			%>
129
130

JavaScript
1$(function() {
2	$('[name = "applicationStatus"]').on('change', function(){
3		var idArray = $('.select').data('numbers');
4		console.log(idArray[0]);
5	})
6	
7	$.ajax({
8		url: 'ApplicationHolidayOfOneUser',
9		type: 'POST',
10		data:{
11			idArray: idArray.data('numbers')
12		},
13	})
14	.done(function() { 
15		console.log("success"); 
16		})
17		
18    .fail(function() { 
19    	console.log("failed"); 
20    	})
21});

どなたかご教示いただけましたら幸いでございます。

m.ts10806

2020/10/16 06:13

>Ecripse Eclipse です。

NodaYudai

2020/10/16 06:21

ご指摘ありがとうございます。修正致しました。

m.ts10806

2020/10/16 06:32

あと、ajaxはいつ実行したいのでしょうか。ページロード時に行っている実装になっていますが。。また、data属性に指定した情報をどう使いたいのか見えません。

NodaYudai

2020/10/16 07:30

ご回答ありがとうございます。 ajaxはセレクトボックスの選択を行った際に実行したいです。 data属性に指定した値は、・paidHolidayID, statusIdは特定のカラムに存在する情報のセレクトボックスで指定したステータスのIDでDBを更新・userIdは画面の再描画で使用しております。

m.ts10806

2020/10/16 07:33

質問本文に記載してください。要件なので、質問本文にないと伝わりません。

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1$("option:selected", this).data();

でdata属性の内容を取得できるはずです。

理由：
$('#select') では id属性に select を持つものを取得してしまいます。

javascript
1$('[name = "applicationStatus"]').on('change', function(){
2
3}

でSELECT要素を取得できているので、その要素そのものは this で取得できるのですが、SELECT要素の選択したoptionを、thisを使って取得するにはこの記述になります。

qiita:jQueryでthis option:selectedを取得する

投稿2020/10/16 06:40

A-pZ

総合スコア12011

NodaYudai

2020/10/16 07:31

ご丁寧にありがとうございます。選択されたoptionの情報を持ってくることができました。

行動規範の内容に同意します

あんまり詳しく質問を見てないですけど、とりあえず下のセレクタ存在しないですね。

js
1$('#select')

投稿2020/10/16 06:06

muteki_gamer

総合スコア157

NodaYudai

2020/10/16 06:22

ご指摘ありがとうございます。修正しましたが、エラーに変化はない状態です。

muteki_gamer

2020/10/16 06:34

dataメソッドを使えるのはjQueryDOMに対してで、class selectが複数あるので.selectで取れるのは配列ですから、動かないとは思いますね。質問呼んだら、セレクトボックスで選ばれてる値が欲しい感じなんですね。ググればたくさん出てくると思いますよ。

NodaYudai

2020/10/16 07:31

ご丁寧にありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

セレクトボックスの値をAjaxでPOSTする（jQuery）

関連した質問