• 締切済み

セレクトボックスについて

<script type="text/javascript"> function entryChange(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == '0'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '1'){ document.getElementById('selectbox1').style.display = ""; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '2'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = ""; document.getElementById('selectbox3').style.display = "none"; } if(id == '3'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = ""; } } } window.onload = entryChange; </script> ↑こちらは表示/非表示の処理をしています。 <select id="changeSelect" name="number" onchange="entryChange();"> <option value="0">未選択</option> <option value="1">リスト1</option> <option value="2">リスト2</option> <option value="3">リスト3</option> </select> <select name="number" id="selectbox1" style="display:none"> <option value="東京都">東京都</option> <option value="京都府">京都府</option> </select> <select name="number" id="selectbox2" style="display:none"> <option value="北海道">北海道</option> <option value="沖縄県">沖縄県</option> </select> <select name="number" id="selectbox3" STYLE="display:none"> <option value="兵庫県">兵庫県</option> <option value="大阪府">大阪府</option> </select> <input type="submit" value="送信"> (1)「未選択」のまま送信すると「大阪府」が送信されます。 (2)「リスト1」→「沖縄県」を選択 「大阪府」が送信されます。(リスト2も同じ事になります。) (3)「リスト3」→「兵庫県」を選択 「兵庫県」と送信されます。 リスト3以外を選択するとなぜか「大阪府」が送信されます。 初心者なりに色々調べたのですが解決できず困っております。 よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • taco0603
  • ベストアンサー率63% (21/33)
回答No.1

はじめまして。 CSSのdisplayプロパティは単純に表示形式を制御しているだけです。 FORMのSELECTタグにdisplay:noneを適用した場合非表示になりますが、SUBMITをすればSELECTタグの値も送信されます。 非表示のSELECT要素を送信したくない場合はJavaScriptで各SELECTタグのdisabledプロパティをtrueに設定して下さい。

beginner_hiyoko
質問者

お礼

上手く送信されました。 ありがとうございました。

関連するQ&A

  • セレクトボックスの中を一部隠したい ( IE )

    セレクトボックスの中を一部隠したいのですが、IEでは隠れてくれません。firefoxなどでは、ちゃんと隠れるのですが、IEではどのようにすれば隠れるのでしょうか? (例) 以下のセレクトボックスで、0・1のみ表示されるようにしたいです。 <select name="s" id="s"> <option value="0" name="s[0]" id="s[0]" >0</option> <option value="1" name="s[1]" id="s[1]" >1</option> <option value="2" name="s[2]" id="s[2]" style="display:none;">2</option> </select> また、javascriptで隠した部分を表示・非表示したいのですが、あわせて教えていただけないでしょうか。 firefox など、では以下で変化があるのですが、 document.getElementById('s[2]').style.display='block';   //表示 document.getElementById('s[2]').style.display='none';   //非表示 IE ではうんともすんともいってくれません・・・ document.all('s[2]').style.display='block';   //表示 document.all('s[2]').style.display='none';   //非表示 ちなみにテスト環境はIE7になります、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • style.displayだと効率悪いから...

    style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • style.displayだと効率悪いから…

    style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById(&#039;Box1&#039;).style.display = "";と、 document.getElementById(&#039;Box1&#039;).style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById(&#039;sample&#039;)){ id = document.getElementById(&#039;sample&#039;).value; if(id == &#039;select1&#039;){ document.getElementById(&#039;Box1&#039;).style.display = ""; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = "none"; }else if(id == &#039;select2&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = ""; document.getElementById(&#039;Box3&#039;).style.display = "none"; } else if(id == &#039;select3&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。

  • Javascriptで質問です2

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを2段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • セレクトボックスでそれ以降の表示を切り替えたい

    http://5am.jp/javascript/form_change_javascript/ の「サンプルソース(セレクトボックス)」のような入力フォームを作成中です。セレクトボックスでの選択によって、その下に複数行表示させたいので、サンプルソースのgetElementByIdのところをgetElementsByClassNameにして実装してみたのですが動きませんでした…。 以下が自分が書いたコードになります。どこがおかしいのでしょうか? (インデントがうまくできていなくて申し訳ないです。) 回答よろしくお願いします。 <script type="text/javascript"> function entryChange2() { if (document.getElementById('changeSelect')) { id = document.getElementById('changeSelect').value; if (id == 'select1') { document.getElementsByClassName('firstBox2').style.display = ""; document.getElementsByClassName('secondBox2').style.display = "none"; } else if (id == 'select2') { document.getElementsByClassName('firstBox2').style.display = "none"; document.getElementsByClassName('secondBox2').style.display = ""; } } } window.onload = requestChange; </script> <form> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>利用方法</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">初めて申し込む</option> <option value="select2">2度目以降の利用</option> </select> </td> </tr> <!-- 表示非表示切り替え --> <tr class="firstBox2"> <th>紹介者</th> <td><input type="text" /> <p>紹介された方のお名前を入力してください。</p></td> </tr> <tr class="firstBox2"> <th>紹介者のメールアドレス</th> <td><input type="text" /> <p>紹介された方のメールアドレスを入力してください。</p></td> </tr> <!-- 表示非表示切り替え --> <tr class="secondBox2"> <th>名前</th> <td><input type="text" /> <p>名前を入力してください。</p></td> </tr> <tr class="secondBox2"> <th>会員番号</th> <td><input type="text" /> <p>会員番号を入力してください。</p></td> </tr> </table> </form>

  • セレクトメニューの選択によって次に表示されるDivを変更したい

    ここ2週間くらいずっと経験ないJSとPHPをいじってなんとか形になって来ましたが、どうしてもうまくいきません。 ものすごい初心者なので詳しく教えて頂けるとうれしいです。 【やりたい事】 (1)[県]と選択するとその県の(2)[区市町村]を選択できるセレクトメニューを表示させたい。 (1)と(2)で選んだ項目をデーターベースに保存したい。 【条件】 データーベースを購入して使用しているためID属性設定が出来ず、NAME属性設定しかできません。 【htmlソース】 <form name="sys_form"> 県を呼び出す特殊なコマンドコメント(Value=FP01~北海道)(onchange="showthis(this)"使用) <div id="FP01">北海道の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> <div id="FP02">青森県の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> ~FP47まで続く。 </form> 【JS】 function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "FP01"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "FP01"){ if(document.getElementById){ document.getElementById("FP01").style.display = "none"; } } } 上の状態で北海道は出来たのですが、47都道府県をうまく動作される方法がわかりません。 よろしければ教えて下さい。

  • javascriptで連動するセレクトボックス

    ショッピングサイトを構築しており、選択した商品の金額を表示させたいと考えています。 大分類・中分類・小分類の3種類のセレクトボックスを用意し、 選んだ商品1つだけの金額をDIV要素に表示させたいのですが、 思うように動作せず行き詰ってしまいました。 現状は食べ物-果物の、リンゴかオレンジは正しく表示されるのですが、 他のものになるとセレクトボックスがうまく連動しない状況です。 ソースが長くなってしまい、大変申し訳ないのですが、 どうかお知恵を貸してください。お願いいたします。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>選択した商品のみ金額を表示させる</title> <script type = "text/javascript"> <!-- function listControl() { largeList = document.forms.formName.largeName; middleList = document.forms.formName.middleName; smallList = document.forms.formName.smallName; No = 1; //リストの数が異なる場合 middleList.options.length = 0; smallList.options.length = 0; //中分類の判定 if(largeList.options[largeList.selectedIndex].value == "食べ物"){ middleList.options[0] = new Option("果物","fruit"); middleList.options[1] = new Option("野菜","vegetable"); } else if (largeList.options[largeList.selectedIndex].value == "飲み物"){ middleList.options[0] = new Option("スープ","soup"); middleList.options[1] = new Option("ジュース","juice"); } //小分類の判定 if (middleList.options[middleList.selectedIndex].value == "fruit"){ smallList.options[0] = new Option("果物を選択してください"); smallList.options[1] = new Option("1.リンゴ","apple"); smallList.options[2] = new Option("2.オレンジ","orange"); } else if (middleList.options[middleList.selectedIndex].value == "vegetable"){ smallList.options[0] = new Option("野菜を選択してください"); smallList.options[1] = new Option("3.カボチャ","pumpkin"); smallList.options[2] = new Option("4.イモ","potato"); } else if (middleList.options[middleList.selectedIndex].value == "soup"){ smallList.options[0] = new Option("スープを選択してください"); smallList.options[1] = new Option("5.みそ汁","miso"); } else if (middleList.options[middleList.selectedIndex].value == "juice"){ smallList.options[0] = new Option("ジュースを選択してください"); smallList.options[1] = new Option("6.ミックスジュース","mix"); smallList.options[2] = new Option("7.グレープフルーツ","grapefruit"); smallList.options[3] = new Option("8.トマトジュース","tomato"); } } //div要素を非表示にする function resetBtn(){ for(i=1; i<=8; i++){ document.getElementById("buyList"+[i]).style.display="none"; } } //--> </script> </head> <body> <div class="futoSelectForm"> <form name="formName"> <!--選択肢その1--> <select name = "largeName" onChange="listControl()"> <option value = "">種類を選択してください</option> <option value = "食べ物">食べ物</option> <option value = "飲み物">飲み物</option> </select> <!--選択肢その2(選択肢の項目によって変化)--> <select name = "middleName"> </select> <!--選択肢その3(選択肢の項目によって変化)--> <select name = "smallName" onchange="document.getElementById('buyList'+No).style.display='none';document.getElementById('buyList'+(No=(this.selectedIndex))).style.display='block'"> </select> <input type="button" value="リセット" onclick="resetBtn();"> </form> </div> <div id="buyList0" style="display:none;"></div> <div id="buyList1" style="display:none;">果物:1.リンゴ 120円</div> <div id="buyList2" style="display:none;">果物:2.オレンジ 80円</div> <div id="buyList3" style="display:none;">野菜:3.カボチャ 210円</div> <div id="buyList4" style="display:none;">野菜:4.イモ 40円</div> <div id="buyList5" style="display:none;">スープ:5.みそ汁 50円</div> <div id="buyList6" style="display:none;">ジュース:7.ミックスジュース 180円</div> <div id="buyList7" style="display:none;">ジュース:8.グレープフルーツジュース 150円</div> <div id="buyList8" style="display:none;">ジュース:9.トマトジュース 160円</div> </body> </html>

  • セレクトボックスで選んだ配列を呼び込むプログラム。

    以下は、セレクトボックス1と2でそれぞれ松山市と高松市を選んだら、配列を呼び出すことができるプログラムです。 <script type="text/javascript"> function change() { if (document.getElementById("selbox")) { selboxValue = document.getElementById("selbox").value; if (selboxValue == "1") { //文字1を表示 document.getElementById("txt1").style.display = ""; //文字2を非表示 document.getElementById("txt2").style.display = "none"; } else if (selboxValue == "2") { //文字2を表示 document.getElementById("txt2").style.display = ""; //文字1を非表示 document.getElementById("txt1").style.display = "none"; } } } function kotae() { ten=0 if((f.q1.value == "松山市"&&f.q2.value == "高松市")||(f.q1.value == "高松市"&&f.q2.value == "松山市")) {f.q1.style.backgroundColor="aqua ";ten = ten + 50} else f.q1.style.backgroundColor="red" if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25} else f.q3.style.backgroundColor="red" if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25} else f.q4.style.backgroundColor="red" f.tokuten.value=ten const keywords = ['あいうえお','かきくけこ', 'さしすせそ']; if (f.tokuten.value=50) { for (let i = 0; i < keywords.length; i++) { console.log(f.rank.value=keywords[0]); }} else if(f.tokuten.value >=20){f.rank.value = 'B'} else if(f.tokuten.value >=15){f.rank.value = 'C'} else if(f.tokuten.value <10){f.rank.value = 'D'} //ここまで } </script> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> <input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p> <input name=tokuten size="6">点 <!--HTMLここから--> <input name=rank class="hoge">ランク <!--HTMLここまで--> しかし、僕はもうちょっと踏み込んだところまで行きたいのです。 ブラウザに表示させたいのです。 document.writeで書くと別のページに遷移してしまうし、 一方でalertだと文章が読みづらいです。 ブラウザに配列を表示するものは以下のプログラムですが、 <script> var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成']; for (var i = 0; i < todo.length; i++) {  var todoList = document.createElement('li');  todoList.textContent = todo[i];  document.getElementById('list').appendChild(todoList); } </script> ただ、これだとセレクトボックスで松山市と高松市を選んだ場合の表示ができません。どうしたらいいのでしょうか。 どうしたらいいのでしょうか。

  • window.onloadを複数実行したいのです

    こんにちは。 最近、サーバーを借りてホームページを作りはじめた初心者なのですが、どなかた教えて下さいm(_ _)m ↓formでselectを使ったプルダウンメニューを設置しました。 <select id="area" name="area" onchange="changeA();"> <option value="1">海</ottion> <option value="2">山</option> </select> このプルダウンメニューを触ると、Javascriptの制御で、海の項目が選択されると海関連の情報が表示され、山の項目が選択されると山関連の情報が表示されるページを作りました。 ↓Javascriptソース function changeA(){ if(document.getElementById('area')){ id = document.getElementById('area').value; if(id == '1'){ document.getElementById('sea1').style.display = ""; document.getElementById('sea2').style.display = ""; document.getElementById('mnt1').style.display = "none"; document.getElementById('mnt2').style.display = "none"; }else if(id == '2'){ document.getElementById('sea1').style.display = "none"; document.getElementById('sea2').style.display = "none"; document.getElementById('mnt1').style.display = ""; document.getElementById('mnt2').style.display = ""; } } } window.onload = changeA; という感じです。 このような制御のプルダウンメニューを同じページにもうひとつ配置したところ、ページをブラウザの更新ボタンで更新したりすると、関係ない項目などが表示されるようになってしまいました。 原因を調べるために検索をしてみたところ、window.onloadを2つ実行させるには特別なことが必要とのことでしたが、どうすればよいのかが全然わかりません。 どなたか教えてくれないでしょうか? お願いします。

  • window.onloadのコマンドについて

    下記のソースにあるリセットボタンをクリックした時に、 フォーム内のデータを消去すると共に、window.onloadコマンドを 実行させるようにしたいと考えています。 どのように制御すればよいのか、ご教授頂ければ幸いです。 よろしくお願い致します。 ソース: ---------------------------------------------------------- <script> <!--オンロードさせ、リロード時に選択を保持--> window.onload = loadform; function loadform (){ entryChange01(); entryChange02(); entryChange03(); entryChange04(); } <!--フォームの表示/非表示の制御1--> function entryChange01(){ radio = document.getElementsByName('radio01') if(radio[0].checked) { document.getElementById('table2').style.display = "none"; document.getElementById('table3').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table2').style.display = ""; document.getElementById('table3').style.display = ""; } } <!--フォームの表示/非表示の制御2--> function entryChange02(){ radio = document.getElementsByName('radio02') if(radio[0].checked) { document.getElementById('table5').style.display = "none"; document.getElementById('table6').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table5').style.display = ""; document.getElementById('table6').style.display = ""; } } } </script> <input type="reset" value="リセット" onclick="return confirm('本当に入力内容を削除してもよろしいですか?');" />&nbsp;