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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

1089閲覧

遷移元から遷移先の非表示要素の表示をjavascriptで

pontaweb

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

1クリップ

投稿2021/12/22 15:41

編集2021/12/23 07:47

前提・実現したいこと

はじめまして。ポンタと申します。
どうぞ宜しくお願いいたします。
javaScriotで、フォーム(contact.html)のSelectboxを選択したときに、それぞれに違った内容のチェックボックスを表示させたものがあります。

別ページ(index.html)などからフォーム(contact.html)へ遷移したときに遷移元に沿ったselectboxが選択されている状態までは作れているのですが、その時にそれぞれに違った内容のチェックボックスが表示されません。

trigger で試したのですが、やはり上手くはいかずご教示いただけたらと思います。

以下に、ソースコードを記載します。

■index.html■

html

1<body> 2 <div class="contact"> 3 <p><a href="contact.html?id=01">お問い合わせはこちら</a></p> 4 </div> 5 <script src="contact.js" type="text/javascript" charset="utf-8"></script> 6 <script src="service.js" type="text/javascript" charset="utf-8"></script> 7</body>

■contact.html■

html

1 2<body> 3 <form action="submit.php" method="POST"> 4 <dl> 5 <dt class="first"><span class="necessary">必須</span>お問い合わせ項目</dt> 6 <dd> 7 <select id="othersInquiry" name="othersInquiry" class="multipicklist required" size="1" tabindex="30"> 8 <optgroup label=""> 9 <option value="" data-select="check-none">選択してください</option> 10 <option value="選択01" data-select="check-01">選択01</option> 11 <option value="選択02" data-select="check-02">選択02</option> 12 <option value="選択03" data-select="check-03">選択03</option> 13 <option value="選択04" data-select="check-04">選択04</option> 14 </optgroup> 15 </select> 16 </dd> 17 </dl> 18 <dl class="naiyoBox"> 19 <dt><span>任意</span>サービス内容<br>(複数選択可)</dt> 20 <dd> 21 <div class="check-01"> 22 <label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択01-01" class="input-a"><span>選択01-01</span></label> 23 <label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択01-02" class="input-a"><span>選択01-02</span></label> 24 </div> 25 <div class="check-02"> 26 <label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択02-01" class="input-a"><span>選択02-01</span></label> 27 <label class="label-type1"><input type="checkbox" name="selectName_c[]" value="選択02-02" class="input-a"><span>選択02-02</span></label> 28 </div> 29 </dd> 30 </dl> 31 32 <div> 33 <input id="save" name="save2" type="submit" value="送信する" /> 34 </div> 35 36 </form> 37 <script src="contact.js" type="text/javascript" charset="utf-8"></script> 38 <script src="service.js" type="text/javascript" charset="utf-8"></script> 39</body>

■service.js■

js

1$(function(){ 2 3 var arg = new Object; 4 url = location.search.substring(1).split('&'); 5 for(i=0; url[i]; i++) { 6 var k = url[i].split('='); 7 arg[k[0]] = k[1]; 8 } 9 10 var id = arg.id; 11 var list = { 12 '01':'check-01', 13 '02':'check-02', 14 '03':'check-03', 15 '04':'check-04', 16 } 17 var list_id = list[id]; 18 $("#othersInquiry").val(list_id); 19 20 $('.contact').on('click', function() { 21 // ここにtriggerを試してみました 22 }) 23});

■contact.js■

js

1function changeSelect(){ 2 var val = $('#othersInquiry option:selected').attr('data-select'); 3 $('.naiyoBox').hide(); 4 console.log(val); 5 if(val == 'check-01' || val == 'check-02'){ 6 $('.naiyoBox').show(); 7 } 8 $('.naiyoBox input').prop('checked', false); 9 10 $('.naiyoBox').addClass('show'); 11 if (val == '#othersInquiry') return; 12 $('.naiyoBox dd div').removeClass('select'); 13 $('div.' + val ).addClass('select'); 14 } 15 $(document).on('change', '#othersInquiry', changeSelect);

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

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

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

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

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

m.ts10806

2021/12/22 22:50

コードはマークダウンのcodeにてご提示ください
pontaweb

2021/12/23 01:52

m.ts10806様 ご指摘ありがとうございます! コードをマークダウンのcodeにし編集しました。 宜しくお願いします。
guest

回答1

0

ベストアンサー

service.js の $("#othersInquiry").val(list_id); のあとに changeSelect() を呼べばよいんじゃないでしょうか。

投稿2021/12/23 07:51

int32_t

総合スコア21695

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

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

pontaweb

2021/12/23 09:02

int32_tさん 回答ありがとうございます。 読んでみましたが、変わりありませんでした。
int32_t

2021/12/23 09:07

ブラウザの開発者ツールのコンソールにエラーが出てませんか? > var val = $('#othersInquiry option:selected').attr('data-select'); :selected じゃなくて :checked では。
pontaweb

2021/12/23 13:27

たしかにエラーが確認でき修復して、 :checkedに変更したのですがダメでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問