- ベストアンサー
リストボックスの条件
下記のHtmlだと、男の子を選択すると、下２行に「-----------------」が出てくると思うのですが、項目数が異なったら見せないような方法はありますか？もしくは、JavaScriptで他の良い方法があれば教えてください。 <HTML> <HEAD> <TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--- function BYGR() { flag = document.forms[0].elements[0].value if(flag=="BOY") { document.forms[0].elements[1].options[0].text = "サッカー選手"; document.forms[0].elements[1].options[1].text = "-------------------------------------"; document.forms[0].elements[1].options[2].text = "-------------------------------------"; } if(flag=="GIR") { document.forms[0].elements[1].options[0].text = "学校の先生"; document.forms[0].elements[1].options[1].text = "ケーキ屋さん"; document.forms[0].elements[1].options[2].text = "看護婦"; } if(flag=="") { document.forms[0].elements[1].options[0].text = "男の子用・女の子用を選んでください"; document.forms[0].elements[1].options[1].text = "-------------------------------------"; document.forms[0].elements[1].options[2].text = "-------------------------------------"; } } //---> </SCRIPT> </HEAD> <BODY> <P><HR> 男の子用・女の子用の将来の夢を選択して下さい<BR> <FORM>性別 <SELECT onChange="BYGR()"> <OPTION VALUE=""> <OPTION VALUE="BOY">男 <OPTION VALUE="GIR">女 </SELECT> <P> <SELECT> <OPTION>男の子用・女の子用どちらか選んで下さい <OPTION>------------------------------------- <OPTION>------------------------------------- </SELECT> </FORM> </BODY> </HTML>
- sunny65
- お礼率43% (41/95)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
県の検索がうまくいかないというのは、県を選択すると県のプルダウンがなくなってしまうことでしょうか？ だとしたら、 document.forms[0].elements[1].length = 0; の部分で県のプルダウンを0にしているからです。 elements[1]というのはフォームタグの中でのエレメントの通し番号を表していて、この場合elements[0]がテキストボックス、elements[1]が県のプルダウンを意味します。 また、リセットボタンは現在選択しているものや記入している内容を消去するだけなので、市町村は残ってしまいます。 以上のことについて手を加えたので確認してみてください。 意図と違っていた場合などはまた返信してください（すぐに回答できない場合もありますが。。。） <HTML> <HEAD> <TITLE>検索</TITLE> <Script Langage="javaScript"> <!--- function BYGR() { var default_ary = new Array(""); var MIE_ary = new Array("上野市" , "名張市" , "名賀郡"); var KYOTO_ary = new Array("京都市北区" , "京都市上京区" , "京都市左京区" , "京都市中京区","京都市東山区" , "京都市下京区"); var WAKAYAMA_ary = new Array("和歌山市" , "海南市" , "橋本市" , "那賀郡" , "伊都郡"); document.myForm.city.length = 0; flag = document.myForm.pref.value if (flag=="MIE") { document.myForm.city.length = MIE_ary.length; for(var i=0; i<MIE_ary.length; i++) { document.myForm.city.options[i].text = MIE_ary[i]; } } if (flag=="KYOTO") { document.myForm.city.length = KYOTO_ary.length; for(var i=0; i<KYOTO_ary.length; i++) { document.myForm.city.options[i].text = KYOTO_ary[i]; } } if (flag=="WAKAYAMA") { document.myForm.city.length = WAKAYAMA_ary.length; for(var i=0; i<WAKAYAMA_ary.length; i++) { document.myForm.city.options[i].text = WAKAYAMA_ary[i]; } } if (flag=="") { document.myForm.city.length = default_ary.length; for(var i=0; i<default_ary.length; i++) { document.myForm.city.options[i].text = default_ary[i]; } } } function convert(){ str=myForm.KANA_NAME.value; str=str.replace(/ァ/g,"ア"); str=str.replace(/ィ/g,"イ"); str=str.replace(/ゥ/g,"ウ"); str=str.replace(/ェ/g,"エ"); str=str.replace(/ォ/g,"オ"); str=str.replace(/ャ/g,"ヤ"); str=str.replace(/ュ/g,"ユ"); str=str.replace(/ョ/g,"ヨ"); str=str.replace(/ッ/g,"ツ"); myForm.KANA_NAME.value=str; return true; } function form_clear() { document.myForm.KANA_NAME.value = ""; document.myForm.pref.selectedIndex = 0; document.myForm.city.options[0].text = "" document.myForm.city.length = 0; } //---> </script> </HEAD> <BODY> <Form name="myForm"> <DIV align="center"> <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TR> <TD bgcolor="#f5f5f5"><SPAN class="text14">名 前</SPAN></TD> <TD bgcolor="#ffffff"><INPUT TYPE="TXET" MAXLENGTH="20" NAME="KANA_NAME" onchange="convert()"></TD> </TR> <TR> <TD bgcolor="#f5f5f5"><SPAN class="text14">住 所</SPAN></TD> <TD bgcolor="#ffffff"><SELECT onChange="BYGR()" name="pref"><OPTION VALUE=""><OPTION VALUE="MIE">三重県<OPTION VALUE="KYOTO">京都府<OPTION VALUE="WAKAYAMA">和歌山県</SELECT><P><SELECT name="city"><OPTION></SELECT></TD> </TR> </TABLE> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="3"> <TR> <TD><INPUT TYPE="button" NAME="END" VALUE="終 了" onclick="window.close()"> <INPUT type="submit" value="検 索"> <input type="button" value="リセット" onClick="form_clear()"></TD> </TR> </TABLE><BR> </DIV> </FORM> </BODY> </HTML>
その他の回答 (2)
- caitsith_goo
- ベストアンサー率59% (28/47)
同じやり方をするならこのようにするとできます。 <HTML> <HEAD> <TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--- function BYGR() { var default_ary = new Array("男の子用・女の子用を選んでください"); var boy_ary = new Array("サッカー選手"); var girl_ary = new Array("学校の先生", "ケーキ屋さん", "看護婦"); document.forms[0].elements[1].length = 0; flag = document.forms[0].elements[0].value if (flag=="BOY") { document.forms[0].elements[1].length = boy_ary.length; for(var i=0; i<boy_ary.length; i++) { document.forms[0].elements[1].options[i].text = boy_ary[i]; } } if (flag=="GIR") { document.forms[0].elements[1].length = girl_ary.length; for(var i=0; i<girl_ary.length; i++) { document.forms[0].elements[1].options[i].text = girl_ary[i]; } } if (flag=="") { document.forms[0].elements[1].length = default_ary.length; for(var i=0; i<default_ary.length; i++) { document.forms[0].elements[1].options[i].text = default_ary[i]; } } } //---> </SCRIPT> </HEAD> <BODY> <P><HR> 男の子用・女の子用の将来の夢を選択して下さい<BR> <FORM>性別 <SELECT onChange="BYGR()"> <OPTION VALUE=""> <OPTION VALUE="BOY">男 <OPTION VALUE="GIR">女 </SELECT> <P> <SELECT> <OPTION>男の子用・女の子用どちらか選んで下さい </SELECT> </FORM> </BODY> </HTML>
補足
素早いお返事ありがとうございます。 早速教えていただいたソースを埋め込みました。 これ以外に、全角小文字を大文字に変換するJavaScriptもいれているのですが、大文字への変換は何度でもできるのに、県の検索がうまく動 きません。 名前のTEXTを外すと県の選択はうまくいくのですが…何故でしょうか？ また、リセットボタンを押したら、県だけが空白になって、市町村は残ってしまうのです。 この対応も分かられましたら教えてください。よろしくお願いします。 <HTML> <HEAD> <TITLE>検索</TITLE> <Script Langage="javaScript"> <!--- function BYGR() { var default_ary = new Array(""); var MIE_ary = new Array("上野市" , "名張市" , "名賀郡"); var KYOTO_ary = new Array("京都市北区" , "京都市上京区" , "京都市左京区" , "京都市中京区","京都市東山区" , "京都市下京区"); var WAKAYAMA_ary = new Array("和歌山市" , "海南市" , "橋本市" , "那賀郡" , "伊都郡"); document.forms[0].elements[1].length = 0; flag = document.forms[0].elements[0].value if (flag=="MIE") { document.forms[0].elements[1].length = MIE_ary.length; for(var i=0; i<MIE_ary.length; i++) { document.forms[0].elements[1].options[i].text = MIE_ary[i]; } } if (flag=="KYOTO") { document.forms[0].elements[1].length = KYOTO_ary.length; for(var i=0; i<KYOTO_ary.length; i++) { document.forms[0].elements[1].options[i].text = KYOTO_ary[i]; } } if (flag=="WAKAYAMA") { document.forms[0].elements[1].length = WAKAYAMA_ary.length; for(var i=0; i<WAKAYAMA_ary.length; i++) { document.forms[0].elements[1].options[i].text = WAKAYAMA_ary[i]; } } if (flag=="") { document.forms[0].elements[1].length = default_ary.length; for(var i=0; i<default_ary.length; i++) { document.forms[0].elements[1].options[i].text = default_ary[i]; } } } function convert(){ str=myForm.KANA_NAME.value; str=str.replace(/ァ/g,"ア"); str=str.replace(/ィ/g,"イ"); str=str.replace(/ゥ/g,"ウ"); str=str.replace(/ェ/g,"エ"); str=str.replace(/ォ/g,"オ"); str=str.replace(/ャ/g,"ヤ"); str=str.replace(/ュ/g,"ユ"); str=str.replace(/ョ/g,"ヨ"); str=str.replace(/ッ/g,"ツ"); myForm.KANA_NAME.value=str; return true; } //---> </script> </HEAD> <BODY> <Form name="myForm"> <DIV align="center"> <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TR> <TD bgcolor="#f5f5f5"><SPAN class="text14">名 前</SPAN></TD> <TD bgcolor="#ffffff"><INPUT TYPE="TXET" MAXLENGTH="20" NAME="KANA_NAME" onchange="convert()"></TD> </TR> <TR> <TD bgcolor="#f5f5f5"><SPAN class="text14">住 所</SPAN></TD> <TD bgcolor="#ffffff"><SELECT onChange="BYGR()"><OPTION VALUE=""><OPTION VALUE="MIE">三重県<OPTION VALUE="KYOTO">京都府<OPTION VALUE="WAKAYAMA">和歌山県</SELECT><P><SELECT><OPTION></SELECT></TD> </TR> </TABLE> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="3"> <TR> <TD><INPUT TYPE="button" NAME="END" VALUE="終 了" onclick="window.close()"> <INPUT type="submit" value="検 索"> <input type="reset" value="リセット"></TD> </TR> </TABLE><BR> </DIV> </FORM> </BODY> </HTML>
- ryou0607
- ベストアンサー率27% (71/261)
document.forms[0].elements[1].length=0; とすると、初期化できたような気がします。
補足
早速のお返事ありがとうございます。
お礼
ありがとうございました。 大変分かりやすかったです。