- 締切済み
プルダウンを2個選び、その結果に基づき、値を返す。
プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。
- semboku_love
- お礼率4% (43/955)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>しかも、formタグを一つにすると、 >プルダウンが一つになっちゃうもんなぁ。 プルダウンはちゃんと、2個ありますよ。 FORM内で何個でも、フォームパーツは配置できますので。 下手すればFORM自体もなしでも直接リスナー接続すれば それでも動作するので、 FORMの数とSELECTタグの数が問題になったら、 お試しを。 検収可能な物と判断してるので、 ひとまず、こちらは、この板辞退します。 では！
- AsarKingChang
- ベストアンサー率46% (3467/7474)
<!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var select1 = document.forms.form1.Select1; var select2 = document.forms.form1.Select2; var target = document.getElementById("output11"); /* 最初に消さないと、過去のごみが残る */ target.innerHTML = ""; /* 要件定義は、「２つ選んで初めて発動するように」なので、２つ選んでいない場合は、無視する */ if (!select1.selectedIndex || !select2.selectedIndex) { target.innerHTML = "２つ選んでください"; // バリデートテキスト(このみでどうぞ) return; } /* 「二つ選んで初めて発動する」 */ if (select1.value == "要素1" && select2.value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } /* 上記を１行化すると */ target.innerHTML = (!select1.selectedIndex || !select2.selectedIndex)? "２つ選んでください":(select1.value == "要素1" && select2.value == "要素11")? "合っています。":"間違っています。"; /* * 可能なら、文字ではなく、インデックスの位置selectedIndexを判定させることで、 * 整数比較のみとなるので、無駄がなくなります。 * 1.ソースに答えが書かれていないため、安全である * 2.整数の比較のみなので、高速になる。 * のメリットは得られます。 */ } //--------------------- // </script> </head> <body> <form name="form1" action=""> <div>プルダウンのメニュー１</div> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> <!-- FORM を２個に分ける意味がないため、合体してシンプル化 */ <div>プルダウンのメニュー２</div> <select id="Select2" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> 今回は真面目に書いといたよ！ あと、要件定義は「初めて」だったはずだから、 検収ポイントが多分間違ってるよね？なので、 それも修正。 あと、１行で済ませる書式も追加（使っても使わなくてもいい） HTMLにFORMが２個ある意味がそもそもないので、１本化 ちょっと直せば、 １つ目のSELECTの「３番目」と２つ目のSELECTの「２番目」を選べば正解。 みたいに、ソース内に「回答の文字を入れない」やり方にも 変形できるように、コーディングしといたよ。 OkKaLng?
- retorofan
- ベストアンサー率34% (424/1244)
打開案は簡単です。 × if ((value == "要素1")&&(value == "要素11")) { ○ if (value1 == "要素1" && value2 == "要素11") { ほら、ね！
補足
う～ん、どれが必要で、どれが必要じゃないか、いまいち。 しかも、formタグを一つにすると、 プルダウンが一つになっちゃうもんなぁ。