jQueryでtdタグにあるセレクトボックスの選択された値が取得したい

前提・実現したいこと

お世話になっております。

現在、個人ごとのページ閲覧権限を管理するサイトを作っています。
やりたいこととしては、権限を変更するものにチェックを入れて更新ボタンを押すと、
チェックされている項目から見て、直近のセレクトボックスの選択された値が取得できません。

<head>
	<link rel="stylesheet" href="test.css"/>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>

<table>
	<thead>
		<tr>
			<th></th>
			<th>empCode</th>
			<th>kengenA</th>
			<th>kengenB</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox"></td>
			<td>123</td>
			<td>
				<select>
					<option value="1">権限1</option>
					<option value="2">権限2</option>
				</select>
			</td>
			<td>
				<select>
					<option value="1">権限1</option>
					<option value="2">権限2</option>
				</select>
			</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>456</td>
			<td>
				<select>
					<option value="1">権限1</option>
					<option value="2">権限2</option>
				</select>
			</td>
			<td>
				<select>
					<option value="1">権限1</option>
					<option value="2">権限2</option>
				</select>
			</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>789</td>
			<td>
				<select>
					<option value="1">権限1</option>
					<option value="2">権限2</option>
				</select>
			</td>
			<td>
				<select>
					<option value="1">権限1</option>
					<option value="2">権限2</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>

<input type="submit" id="btnUpdate" value="更新"/>

<script>
	$('#btnUpdate').on('click', function(){
			$('tbody :checkbox:checked').each(function(){
				$empCode = $(this).closest('tr').children('td')[1].innerText;
				$KENGEN1   = $(this).closest('tr').children('td')[2].innerText;
				alert(($empCode));
				alert(($KENGEN1));
			});
	});
</script>

試したこと

現在はinnerTextで取得して選択項目がすべて取得される状態ですが、valueでも取得できませんでした。

m.ts10806

2019/08/08 01:26

「ASP」タグはどのように関係するのでしょうか。

poyopoy

2019/08/08 01:28

ありがとうございます。クラシックASP環境で開発しておりましたが、今回の質問内容とは関係ないので消しておきます。

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

回答2件

ベストアンサー

権限A・B両方とも取得はこうかな

JavaScript
1<script>
2    $('#btnUpdate').on('click', function(){
3        $('tbody :checkbox:checked').each(function(){   
4            let selectBoxList = $(this).parents('tr').find('select');
5            selectBoxList.each(function(){ 
6                console.log($("option:selected", this).val());
7            });
8        });
9    });
10</script>

投稿2019/08/08 02:02

yxt003

総合スコア184

poyopoy

2019/08/08 02:15

回答ありがとうございました。思い通りの結果が得られました。ありがとうございました！

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

こうですか？

javascrip
1<script>
2$(function(){
3  $('#btnUpdate').on('click', function(){
4    $('tbody :checkbox:checked').each(function(){
5      console.log($(this).closest('td').next('td').text());
6      console.log($(this).closest('tr').find('select').val());
7    });
8  });
9});
10</script>
11
12<table>
13    <thead>
14        <tr>
15            <th></th>
16            <th>empCode</th>
17            <th>kengenA</th>
18            <th>kengenB</th>
19        </tr>
20    </thead>
21    <tbody>
22        <tr>
23            <td><input type="checkbox"></td>
24            <td>123</td>
25            <td>
26                <select>
27                    <option value="1">権限1</option>
28                    <option value="2">権限2</option>
29                </select>
30            </td>
31            <td>
32                <select>
33                    <option value="1">権限1</option>
34                    <option value="2">権限2</option>
35                </select>
36            </td>
37        </tr>
38        <tr>
39            <td><input type="checkbox"></td>
40            <td>456</td>
41            <td>
42                <select>
43                    <option value="1">権限1</option>
44                    <option value="2">権限2</option>
45                </select>
46            </td>
47            <td>
48                <select>
49                    <option value="1">権限1</option>
50                    <option value="2">権限2</option>
51                </select>
52            </td>
53        </tr>
54        <tr>
55            <td><input type="checkbox"></td>
56            <td>789</td>
57            <td>
58                <select>
59                    <option value="1">権限1</option>
60                    <option value="2">権限2</option>
61                </select>
62            </td>
63            <td>
64                <select>
65                    <option value="1">権限1</option>
66                    <option value="2">権限2</option>
67                </select>
68            </td>
69        </tr>
70    </tbody>
71</table>
72
73<input type="submit" id="btnUpdate" value="更新"/>