selectで選択項目に伴った2個目の項目の変更

解決済

質問者：xjokerx44
質問日時：2008/03/23 19:13
回答数：4件

はじめて質問させていただきます。
よろしくおねがいします。

・住所などの入力画面で、都道府県を選択すると、選択した都道府県に対応した市区町村の項目を表示させたいです。
・PHPは使えないので、Javascriptのみで制作しなければなりません。
・出来る限りすっきりとしたソースを希望しております。

おわかりの方がいらっしゃいましたら、教えて下さい。
よろしくおねがいします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： _pipi_
回答日時：2008/03/23 23:16

idとnameがあいまいでした！

すっきりとしたソースかは微妙です。^^;
半角空白で値を並べてください
<html>
<body>
<select name="a" onChange="setsel($N('b'),s[this.value])" style="width:6em"></select>県
<select name="b" style="width:6em"></select>市

<script>
var r='青森岩手秋田';
var s=[];
s[0]='青森弘前八戸';
s[1]='盛岡北上一関';
s[2]='秋田大館能代';

window.onload = function(){
setsel($N('a'),r);
setsel($N('b'),s[0]);//最初は青森
}
function setsel(o,c){
while(o.hasChildNodes()) o.removeChild(o.lastChild);
t=c.split(' ');
for(i in t){n=document.createElement('option');n.value=i;n.innerHTML=t[i];o.appendChild(n)}
}
function $N(o){return document.getElementsByName(o)[0]}
</script>
</body></html>

- 0
- 件

通報する

この回答へのお礼

度々ありがとうございます！
わたくし的にはこちらの方が好きです！
早速こちらで制作したいと思います。
本当に有難う御座います。

通報する

お礼日時：2008/03/26 20:05

No.4

回答者： steel_gray
回答日時：2008/03/24 10:21

#1です。

ちょっとあっさりしすぎていたので補足。

スッキリしたものお望みなら
http://d.hatena.ne.jp/Mars/20071109
とか。

ただ、住所入力が楽にできる事が大切でselectである事にこだわらないならデータが同梱されている点なども含めて
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2 …
http://www.kawa.net/works/ajax/addrajax/addrajax …
このあたりもいいかと思います。

- 0
- 件

通報する

この回答へのお礼

度々ありがとうございます。
参考URL、早速拝見しました。
色々と検討して、制作したいと思います。
有難う御座いました。

通報する

お礼日時：2008/03/26 20:08

No.2

回答者： _pipi_
回答日時：2008/03/23 21:51

<html>

<body>
<select name="a" onChange="setsel(this.value)">
<option value="0">青森</option>
<option value="1">岩手</option>
<option value="2">秋田</option>
</select>県
<select name="b"></select>市

<script>
var si=[];
si[0]='青森弘前八戸';
si[1]='盛岡北上一関';
si[2]='秋田大館能代';

window.onload = function(){ setsel(0);}//最初は青森
function setsel(n){
o=document.getElementById('b');
while(o.hasChildNodes()) o.removeChild(o.lastChild);
t=si[n].split(' ');
for(i=0;i<t.length;i++){
no=document.createElement('option');
no.value = t[i]; no.innerHTML=t[i]; o.appendChild(no);
}
}
</script>
</body></html>