- ベストアンサー
selectで選択項目に伴った2個目の項目の変更
はじめて質問させていただきます。 よろしくおねがいします。 ・住所などの入力画面で、都道府県を選択すると、選択した都道府県に対応した市区町村の項目を表示させたいです。 ・PHPは使えないので、Javascriptのみで制作しなければなりません。 ・出来る限りすっきりとしたソースを希望しております。 おわかりの方がいらっしゃいましたら、教えて下さい。 よろしくおねがいします！
- xjokerx44
- お礼率100% (6/6)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
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>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
#1です。 ちょっとあっさりしすぎていたので補足。 スッキリしたものお望みなら http://d.hatena.ne.jp/Mars/20071109 とか。 ただ、住所入力が楽にできる事が大切でselectである事にこだわらないならデータが同梱されている点なども含めて http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html http://www.kawa.net/works/ajax/addrajax/addrajax.html このあたりもいいかと思います。
お礼
度々ありがとうございます。 参考URL、早速拝見しました。 色々と検討して、制作したいと思います。 有難う御座いました。
<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>
お礼
ありがとうございます。 とてもわかりやすく記述してくださったので、 本当に嬉しいです！ 本当に有難う御座いました！！
- steel_gray
- ベストアンサー率66% (1052/1578)
「連動select」で検索するといろいろなタイプのサンプルが見つかりますよ。
お礼
有難う御座います。 早速検索したら、沢山出て来ました。 検索ワード自体わからなかったので、とても参考になりました。 有難う御座いました。
お礼
度々ありがとうございます！ わたくし的にはこちらの方が好きです！ 早速こちらで制作したいと思います。 本当に有難う御座います。