ラジオボタンを選択することによって、
同FORM内のポップアップメニューの内容を変化させる様なものを考えています。

例:埼玉を選択すると

◎埼玉県
○神奈川県

┌─────────────┬─┐
│市            │▼│
├─────────────┴─┤
│さいたま           │
│浦和             │
└───────────────┘

例:神奈川を選択すると

○埼玉県
◎神奈川県

┌─────────────┬─┐
│市            │▼│
├─────────────┴─┤
│川崎             │
│横須賀            │
└───────────────┘

の様な感じなのです。
簡単な方法はないでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

簡単に書いてみました。

いかが?

<html>
<head>
</head>
<body>

<script type="text/JavaScript">
function changeOption(btn, opt) {
if (btn.value == "saitama") {
opt.options.length = 0;
opt[0] = new Option("市", "1", true, true);
opt[1] = new Option("さいたま", "2");
opt[2] = new Option("浦和", "3");
} else if (btn.value == "kanagawa") {
opt.options.length = 0;
opt[0] = new Option("市", "1", true, true);
opt[1] = new Option("川崎", "2");
opt[2] = new Option("横須賀", "3");
opt[3] = new Option("生田", "4");
}
}
</script>

<form>
<input name=links type=radio value="saitama" onClick="changeOption(this, opt1)">埼玉県<br>
<input name=links type=radio value="kanagawa" onClick="changeOption(this, opt1)">神奈川県<br>
<select name=opt1>
<option>             <!-- サイズを合わせるために、全角の空白を幾つか書いてある -->
<option>
<option>
<option>
</select>

</form>

</body>
</html>
    • good
    • 0
この回答へのお礼

これです!ずばりこのイメージです。
この様な初心者の質問にソースまで書いていただき本当にありがとうございます。
参考にさせていただき、がんばって勉強したいと思います。

本当にありがとうございました。

お礼日時:2001/11/20 14:34

以下のアドレスのサンプルモジュールデモ


に 「二段セレクト入力」のサンプルがあります

参考にしてみては、いかがですか 

参考URL:http://www.spinnen.co.jp/
    • good
    • 0
この回答へのお礼

ありがとうございます。
いろいろとデモありますが、ソースをいただくのは気が引けますので、参考にさせていただきます。

回答ありがとうございました。

お礼日時:2001/11/20 14:30

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q時間帯○時○分で表示切替

下記ソースで AM9:30分~PM12:00の間 02.htmlを表示
それ以外は、01.htmlを表示させたいのですが
AM10:00~AM10:29,AM11:00~AM11:29の時間帯は02.htmlを表示するように
考えたのですが、01.htmlを表示してしまいします。
どこか抜けがありますか?
解決する方法はありますでしょうか?


<script type="text/javascript">
<!--
window.onload = function(){
var date = new Date();
// 時間を取得
var hour = date.getHours();
// 何分か取得
var minute = date.getMinutes();

if(hour >= 9 && minute >= 30 && hour < 12){// 9時30分から12時までは02.html
location.href = "02.html";

}
else{
location.href = "01.html";// 上記以外は01.html
}
}
// -->
</script>

下記ソースで AM9:30分~PM12:00の間 02.htmlを表示
それ以外は、01.htmlを表示させたいのですが
AM10:00~AM10:29,AM11:00~AM11:29の時間帯は02.htmlを表示するように
考えたのですが、01.htmlを表示してしまいします。
どこか抜けがありますか?
解決する方法はありますでしょうか?


<script type="text/javascript">
<!--
window.onload = function(){
var date = new Date();
// 時間を取得
var hour = date.getHours();
// 何分か取得
var minute = date.getMinutes();

if(hour >= 9 && minute >= 30 ...続きを読む

Aベストアンサー

<script>
window.onload = function(){
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
if((hour == 9 && minute >= 30) || (hour >=10 && hour < 12)){
alert("02.html");
}else{
alert("01.html");
}
}
</script>

Q「~○ヶ月○日」という表示方法 2

以前こちらで同じ質問をさせていただきました。
教えていただいた方にもう1度聞こうと思ったんですが
ここではそれはできないようなので、どなたか教えてください!

「HPを開設してから○ヶ月と○日が経ちました」
というような表示をしたいのです。
以前教えていただいた方法でうまく表示されていたのですが、
最近ちょっとくるってるんです。
本当は4ヶ月と22日(5/4現在)なんですが
5ヶ月と8日と表示されてしまいます。
なぜでしょうか?
いろいろ検索してまわったのですが、
どれも何日という表示方法で、○ヶ月というのは見つかりませんでした。
以前教えていただいたのは↓です。

<SCRIPT>
var StrMsg = "";
var dtToday = new Date;//現在の日付を取得する。
var StDay = new Date(2001,12,12);//Date(年,月,日)開設した年月日を入れておく。

//現在の日付から開設日付を引き何日経過したのかを取得する
if(StDay.getMonth()>=dtToday.getMonth()+1){
var strMonth = StDay.getMonth()-(dtToday.getMonth()+1);
}else{


var strMonth = (dtToday.getMonth()+1)-StDay.getMonth();

}
if(dtToday.getDate()>=StDay.getDate()){
var strDate = dtToday.getDate()-StDay.getDate();
}else{
var strDate = StDay.getDate()-dtToday.getDate();
}
//HTMLへと出力する
if(strMonth != 0){
StrMsg = StrMsg + strMonth+"ヶ月と";
}
if(Date != 0){
StrMsg = StrMsg + strDate+"日";
}
if(StrMsg.length != 0){
document.write("HPを開設してから"+ StrMsg +"が経ちました");
}</SCRIPT>

お願いします!!

以前こちらで同じ質問をさせていただきました。
教えていただいた方にもう1度聞こうと思ったんですが
ここではそれはできないようなので、どなたか教えてください!

「HPを開設してから○ヶ月と○日が経ちました」
というような表示をしたいのです。
以前教えていただいた方法でうまく表示されていたのですが、
最近ちょっとくるってるんです。
本当は4ヶ月と22日(5/4現在)なんですが
5ヶ月と8日と表示されてしまいます。
なぜでしょうか?
いろいろ検索してまわったのですが、
どれも何日とい...続きを読む

Aベストアンサー

strDate = "約"+(strDate + 31)

の部分を

var misoka= new Date
misoka.setTime(today.getTime()-today.getDate()*24*60*60*1000)
strDate = (strDate + misoka.getDate())

にして下さい.このコードでは,
「前月最終日までの日数」+「その日から今日までの日数」
として計算します.

Q○日後から○日間分のセレクトボックス:どこを直せばでいいのしょう?

お世話になります。
友人から、「セレクトボックスの日付の並びがおかしい。直してほしい」と頼まれたのですが、開いてみたらJavascriptでした。

<option value = '' selected>------</option>
<script language="javascript">

var Today = new Date();
var d = new Date();
var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" );

/* 2日後~14日後 までを表示 */
for ( var i = 2; i < 15; i++ ){
d.setDate( Today.getDate() + i );

/* 各要素を抽出(月と日は2桁で)*/
var sYer = "" + d.getFullYear();
var sMon = ( "00" + ( d.getMonth() + 1 ) ).match( /..$/ );;
var sDat = ( "00" + d.getDate() ).match( /..$/ );
var sDay = Youbi[ d.getDay() ];

/* <option>を書き出し */
document.write( "<option value = '" + sYer + sMon + sDat + "'>" +
sYer + "年" + sMon + "月" + sDat + "日(" + sDay + ")</option>\n" );
}

</script>
</select>

となっているのですが、現状ですと、このスクリプトで出来たセレクトボックスの最上段の、明後日の日付から来月の1日までの日付はちゃんと表示されるのですが、その先がいきなり1ヶ月跳んでその次は1ヶ月と2日跳んで…といった表示になってしまいます。

2006年04月29日(土)
2006年04月30日(日)
2006年05月01日(月)
2006年06月01日(木)
2006年07月03日(月)
2006年08月03日(木)
2006年09月04日(月)

と言った具合です。

私はこのスクリプトを見ても計算内容か殆ど理解できないので、バグを見つけて直すことが出来ません。

このスクリプトで、月や年をまたいでも正常に「今日の2日後から14日間分」のセレクトボックスを表示できるようにするにはどこをどう書き換えれば良いのでしょうか?

お手数ですが、どうかよろしくお願いします。

お世話になります。
友人から、「セレクトボックスの日付の並びがおかしい。直してほしい」と頼まれたのですが、開いてみたらJavascriptでした。

<option value = '' selected>------</option>
<script language="javascript">

var Today = new Date();
var d = new Date();
var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" );

/* 2日後~14日後 までを表示 */
for ( var i = 2; i < 15; i++ ){
d.setDate( Today.getDate() + i );

/* 各要素を抽出(月と日は2桁で)*/
var...続きを読む

Aベストアンサー

とりあえず、以下の修正でどうでしょうか?

×var Today = new Date();
→使わないので削除

×d.setDate( Today.getDate() + i );
○d.setDate( d.getDate() + 1 );

Qセレクトボックスの初期選択と選択保持

セレクトボックスで選択した日付でカレンダーの検索を行いたいです。
起動したときは当日日付を表示させ、検索後は選択した日付をそのまま表示させておきたいのですがうまくいきません。
javascriptを使用するのではないかと思うのですが、初心者のため記述の仕方がよくわかりません。
どなたかご教授いただけるとうれしいです。よろしくおねがいします。

Aベストアンサー

サーバーサイドのプログラムが動くなら話は別です。

<?php
$y= date ("Y");
if($_REQUEST["y"]) $y = $_REQUEST["y"];

$m= date ("m");
if($_REQUEST["m"]) $m = $_REQUEST["m"];
$d= date ("d");
if($_REQUEST["d"]) $d = $_REQUEST["d"];

for($i = $y-5; $i <= $y+5; $i++){
$selected=$y==$i?" selected":"";
$options["y"].="<option value=\"{$i}\"{$selected}>{$i}</option>\n";
}
for($i = 1; $i <= 12; $i++){
$selected=$m==$i?" selected":"";
$options["m"].="<option value=\"{$i}\"{$selected}>{$i}</option>\n";
}
for($i = 1; $i <= 31; $i++){
$selected=$d==$i?" selected":"";
$options["d"].="<option value=\"{$i}\"{$selected}>{$i}</option>\n";
}
print <<<eof
<form method="get">
<select size="1" name="y">
{$options["y"]}
</select>年
<select size="1" name="m">
{$options["m"]}
</select>月
<select size="1" name="d">
{$options["d"]}
</select>日
<input type="submit" value="go">
</form>
eof;
?>

さらに詳しい説明が必要ならPHPの板で質問ください。

サーバーサイドのプログラムが動くなら話は別です。

<?php
$y= date ("Y");
if($_REQUEST["y"]) $y = $_REQUEST["y"];

$m= date ("m");
if($_REQUEST["m"]) $m = $_REQUEST["m"];
$d= date ("d");
if($_REQUEST["d"]) $d = $_REQUEST["d"];

for($i = $y-5; $i <= $y+5; $i++){
$selected=$y==$i?" selected":"";
$options["y"].="<option value=\"{$i}\"{$selected}>{$i}</option>\n";
}
for($i = 1; $i <= 12; $i++){
$selected=$m==$i?" selected":"";
$options["m"].="<option val...続きを読む

Qチェックボックスの一括選択。一括選択削除

質問させてください。
大分類の項目が3つ、1つの大分類に対しての小分類の項目が5つあり、それぞれの項目にチェックボックスをつけています。
↓□がチェックボックスだとします。
□大分類1   □小分類1-1 □小分類1-2 ・・・小分類1-5

□大分類2   □小分類2-1 □小分類2-2 ・・・小分類2-5

□大分類3   □小分類3-1 □小分類3-2 ・・・小分類3-5

上記のようなフォームをつくり、大分類1のチェックボックスにチェックを入れると、小分類1-1 から 小分類1-5まで自動でチェックが入るスクリプトを作りたいのですが。。。

たとえば、大分類1をチェックしたとき用のファンクション、大分類2をチェックしたとき用のファンクション、大分類3をチェックしたとき用のファンクション。。。と、ファンクションを分ければうまくいくのですが、引数(?)配列(?)を使用して、ひとつのファンクションにまとめれないものでしょうか。。。
ちなみに、スクリプトは以下の通りです。
var count;
function BoxChecked(){
if (document.kisyu.x.checked == true){
for(count = 0; count < document.kisyu.ck.length; count++){
document.kisyu.ck[count].checked = true;
}
}
else{
for(count = 0; count < document.kisyu.ck.length; count++){
document.kisyu.ck[count].checked = false;
}
}
}

上記スクリプト内の「x」が大分類のチェックボックス、「ck」が小分類のチェックボックスとなっています。
色々試したのですがうまくいかず。。。
どなたかご教授願います。

質問させてください。
大分類の項目が3つ、1つの大分類に対しての小分類の項目が5つあり、それぞれの項目にチェックボックスをつけています。
↓□がチェックボックスだとします。
□大分類1   □小分類1-1 □小分類1-2 ・・・小分類1-5

□大分類2   □小分類2-1 □小分類2-2 ・・・小分類2-5

□大分類3   □小分類3-1 □小分類3-2 ・・・小分類3-5

上記のようなフォームをつくり、大分類1のチェックボックスにチェックを入れると、小分類1-1 から 小分類...続きを読む

Aベストアンサー

bxが親でsxが子という名前で確定しているなら以下のようにしてください
ちなみにinputは最低限formの入れ子にしてください

<script language=javascript>
function allCheck(obj){
f=obj.form
num=obj.name.replace("b","")
for(var i=0;i<f.length;i++){
if(f[i].name=="s"+num) f[i].checked=obj.checked;
}
}
</script>
<form>
<table border="0">
<tr>
<td rowspan="4" class="color_1"><input type="checkbox" name="b1" onClick="allCheck(this)">果物</td>
<td class="color_1"><input type="checkbox" name="s1">りんご</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s1">バナナ</td>
</tr>
<tr>
<td class="color_1"><input type="checkbox" name="s1">もも</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s1">なし</td>
</tr>
<tr>
<td rowspan="3" class="color_1"><input type="checkbox" name="b2" onClick="allCheck(this)">野菜</td>
<td class="color_1"><input type="checkbox" name="s2">きゅうり</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s2">トマト</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s2">キャベツ</td>
</tr>
</table>
</form>

bxが親でsxが子という名前で確定しているなら以下のようにしてください
ちなみにinputは最低限formの入れ子にしてください

<script language=javascript>
function allCheck(obj){
f=obj.form
num=obj.name.replace("b","")
for(var i=0;i<f.length;i++){
if(f[i].name=="s"+num) f[i].checked=obj.checked;
}
}
</script>
<form>
<table border="0">
<tr>
<td rowspan="4" class="color_1"><input type="checkbox" name="b1" onClick="allCheck(this)">果物</td>
<td class="color_1"><input ty...続きを読む


人気Q&Aランキング

おすすめ情報