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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1399閲覧

tableのチェックをつけた行にあるプルダウン項目にtable外のプルダウンの値を反映させる。

name_kuro

総合スコア8

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/06/22 10:47

javaでweb開発をしています。

tableのチェックをつけた行にあるプルダウン項目に
table外のプルダウンの値をボタン押下で反映させたいです。

ただ、table1,table2を横並びして、1つの一覧を表示させています。
チェックボックスは行の先頭にあるのでtable1にありますが、
値を反映させたいプルダウン項目はtable2にあります。

java scriptでどのように実装すればよいのでしょうか...

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/06/24 09:42

ご自身で試されたコード(HTML/JavaScript)を質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
guest

回答1

0

ベストアンサー

「こうすればできる」という回答ではなく「初心者が勉強がてらにやってみた」というコメントです。


チェックボックスは行の先頭にあるのでtable1にありますが、

値を反映させたいプルダウン項目はtable2にあります。

ここがポイントなのだろうと思います。もしjQueryで「対象要素と直接親子関係を持たない要素の状態を条件にできるセレクター」が書けるならjQuery(...).val(...)一発で済むのでしょうが、残念ながら自分にはそういうセレクターの書き方を見つけることができませんでした。

そこで、次善の策として、テーブル中のチェックボックスの集合と、プルダウンの集合をそれぞれ取得し、チェック状態の行に対応したプルダウンへのみ値を設定するという素朴な方法でやってみました。

チェックボックスとプルダウンの紐づけはidによる方法がかっちりしているのだろうと思いますが、ここでは深く考えずjQueryによる要素の問い合わせ結果がDOMの兄弟ノードの並び順のまま返されることを前提にインデックスを用いる方法で書いてみました。もしこの前提が正しくないならこのコードはNGになりますがそこは自分には自信がありません。

なお、まだ充分一般的かどうかわかりませんがES6前提で書いてみました。

HTML

1... 2<head> 3... 4<script> 5$(() => { 6 // select要素へoptionを設定(蛇足) 7 let options = [ 'a', 'b' ]; 8 let optionsHtml = options.map(v => 9 `<option value="${v}">Label-${v}</option>` 10 ) 11 .join(''); 12 $('#pd1').html(optionsHtml); 13 $('#t2 select.pd2').html(optionsHtml); 14 15 // buttonのイベント設定 16 $('#set-options').click(setSelectedPulldowns); 17 18 // #pd1の現在値をチェックされた行のselect要素のみへ設定 19 function setSelectedPulldowns() { 20 let curSelection = $('#pd1').val(); 21 let cbs = $('#t1 input.cb'); 22 let pds = $('#t2 select.pd2'); 23 24 cbs.each((i, e) => { 25 if ($(e).prop('checked')) { 26 $(pds[i]).val(curSelection); 27 } 28 }); 29 } 30}); 31</script> 32... 33</head> 34<body> 35<select id="pd1"></select> 36<button id="set-options">set options</button> 37... 38<table id="t1"> 39 ... 40 <td><input type="checkbox" class="cb"></td> 41 ... 42</table> 43<table id="t2"> 44 ... 45 <td><select class="pd2"></select></td> 46 ... 47</table> 48... 49</body> 50</html>

訂正:06/26 19:07:すみません、t2の下のselect要素の属性間違ってました。最初のコードではid="pd2"としてましたが、class="pd2"の誤りです。失礼しました。


この例ではテーブルの全ての行のチェックボックスとプルダウンを取り出していますが、チェックされた行のみ取り出し、idの紐づけに基づき対応するselect要素のみへ値を設定する方が良い方法なのだろうとは思いました。

投稿2017/06/24 06:22

編集2017/06/26 10:08
KSwordOfHaste

総合スコア18392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KSwordOfHaste

2017/06/24 06:36

あやふやな前提を置くよりeqで愚直に一つずつ取ってきた方がまともなコードなのかも知れないと後から思いました。コメントへの記載でスミマセン。
name_kuro

2017/06/26 04:20

やりたかった事は正しくそれです…! 言葉足らずな質問でしたが、ここまで丁寧に教えていただけるとは、本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問