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

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

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

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

JavaScript

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

Q&A

解決済

1回答

4923閲覧

プルダウンメニューの項目を選択するたび、html内の要素を書き換える

vio

総合スコア15

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2018/04/12 19:53

前提・実現したいこと

javascriptでプルダウンメニューの項目を選択するたび、
既存のhtmlの要素を書き換える処理がしたいです。

すごい初心者な質問だと思いますが、数時間悩んでいるのでご教示いただければ幸いです;

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

プルダウンメニューは表示されるのですが、
項目を選択しても要素が切り替わりません…。

該当のソースコード

html

1<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 2 3<form name="form1" action=""> 4 <select id="Select1""> 5 <option>要素1</option> 6 <option>要素2</option> 7 <option>要素3</option> 8 <option>要素4</option> 9 <option>要素5</option> 10 </select> 11 </form> 12 13 <div id="output">デフォルトの文字列</div>

js

1$('select').change(function() { 2 selindex = document.form1.Select1.selectedIndex; 3 target = document.getElementById("output"); 4 switch (selindex) { 5 case 0: 6 target.innerHTML = "要素1が選択されています。<br/>"; 7 break; 8 case 1: 9 target.innerHTML = "要素2が選択されています。<br/>"; 10 break; 11 case 2: 12 target.innerHTML = "要素3が選択されています。<br/>"; 13 break; 14 case 3: 15 target.innerHTML = "要素4が選択されています。<br/>"; 16 break; 17 case 4: 18 target.innerHTML = 19 "<p>テスト要素一段目</p>" + "<p>テスト要素二段目</p>"; 20 break; 21 } 22 }

試したこと

<input type="button" value="Exec" onclick="onButtonClick();" />

上記記述をプルダウンの横に設置し、項目選択後にボタンをクリックする事で書き換えを行う事は出来ました。

補足情報(FW/ツールのバージョンなど)

使用ツール:Sublime Text 3

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

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

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

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

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

guest

回答1

0

ベストアンサー

html

1 <select id="Select1"">

で、"Select1"" は、 "Select1"の誤り

js

1$('select').change(function() { 2 selindex = document.form1.Select1.selectedIndex; 3 以下省略 4}

となっている箇所最後に change(の閉じカッコ ) が不足してます。

この2つは単純に書き間違い。

もう一つjQueryの書き方として、その $('select').change(function() { ... }); ですが、
これをさらに下記のように
$(function($) { ... });で囲う必要があります。
jQuery.ready(function() {}) と同じ意味です。

$(function($) { $('select').change(function() { ... }); });

投稿2018/04/12 21:30

euledge

総合スコア2404

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

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

vio

2018/04/13 00:35

ご回答ありがとうございます! おお、単純なミスだったのですね…。 ご指摘いただいた部分を修正したら、狙い通りの動きをしてくれました! 迅速にお答えいただき、誠にありがとうございます。とても助かりました。????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問