ベストアンサー

※ ChatGPTを利用し、要約された質問です（原文：jsでプルダウンで選択したものがうまく表示されない）

JavaScriptでプルダウン方式の選択がうまく表示されない

2023/03/24 11:16

このQ&Aのポイント

JavaScriptでプルダウン方式に変更したが選択した要素が正しく表示されない
要素1を選択しても表示がされない
改善方法を教えてください

jsでプルダウンで選択したものがうまく表示されない

以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。どうしたら改善されますか。

semboku_love
お礼率4% (43/955)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#255227

2023/03/24 11:30 回答No.1

JavaScriptの関数selectboxChange()内で、'document.forms.form1.Select1.value1document.forms.form1.Select1.value1という記述が誤っています↓ https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Introduction value1はoption要素の属性名ではないため、正しい値を取得できずに条件分岐が機能しないためです。代わりに、選択された 'option要素の値を取得するために、'document.forms.form1.Select1.valuedocument.forms.form1.Select1.valueを使用する必要があります。その後、if文で選択された値が "要素1" かどうかをチェックし、対応するテキストを表示するように変更する必要があります。以下は修正版のスクリプトです：ジャバスクリプト Copy code function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } このように変更すると、プルダウンメニューで "要素1" を選択すると、"合っています。" というテキストが表示されます。

質問者

お礼 2023/03/24 12:22

ありがとうございます。

JavaScriptでプルダウン方式の選択がうまく表示されない

jsでプルダウンで選択したものがうまく表示されない

質問者が選んだベストアンサー

お礼 2023/03/24 12:22

関連するQ&A

プルダウンのメニューを表示を2つ設定。

2個選択することで初めて表示というのができない

質問Aと質問Bを選択して、メッセージを出したい。

innerhtmlで出た値から、ifで返り値を出す

プルダウンを2個選び、その結果に基づき、値を返す。

セレクトメニューに応じたdivタグの内容

javascript クリックで複数の関数の実行

一致する文字を見つけ、それのみ表示させる方法

連動プルダウンのclonenode

jqueryでselect要素を表示・非表示する方

プルダウンメニューでページ内の表示を変える　の派生質問

Rails プルダウンメニューを自動選択するには

JavaScript　プルダウンメニュー選択時に同ウィンドウに表示できない。

JavaScriptでプルダウンのサイズを取得

JSでページ内の表示を変えた時の問題について

テキスト内容の変化でイベント発生

2つのセレクトボックスで選択した組み合わせの結果

【プルダウンメニュー】フレームの中のインラインフレームに、ターゲットを指定するには？

プルダウンを選択していないときは、初期値(selected)の値を、選

Mac版ＩＥ５でのinnerHTMLの動作について

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

JavaScriptでプルダウン方式の選択がうまく表示されない

jsでプルダウンで選択したものがうまく表示されない

質問者が選んだベストアンサー

お礼 2023/03/24 12:22

関連するQ&A

プルダウンのメニューを表示を2つ設定。

2個選択することで初めて表示というのができない

質問Aと質問Bを選択して、メッセージを出したい。

innerhtmlで出た値から、ifで返り値を出す

プルダウンを2個選び、その結果に基づき、値を返す。

セレクトメニューに応じたdivタグの内容

javascript クリックで複数の関数の実行

一致する文字を見つけ、それのみ表示させる方法

連動プルダウンのclonenode

jqueryでselect要素を表示・非表示する方

プルダウンメニューでページ内の表示を変える の派生質問

Rails プルダウンメニューを自動選択するには

JavaScript プルダウンメニュー選択時に同ウィンドウに表示できない。

JavaScriptでプルダウンのサイズを取得

JSでページ内の表示を変えた時の問題について

テキスト内容の変化でイベント発生

2つのセレクトボックスで選択した組み合わせの結果

【プルダウンメニュー】フレームの中のインラインフレームに、ターゲットを指定するには？

プルダウンを選択していないときは、初期値(selected)の値を、選

Mac版ＩＥ５でのinnerHTMLの動作について

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

プルダウンメニューでページ内の表示を変える　の派生質問

JavaScript　プルダウンメニュー選択時に同ウィンドウに表示できない。

カテゴリ
一覧

専門家に質問してみよう
専門家登録