セレクトが[都道府県][市区町村]のふたつがあって、
都道府県選択すると、自動的に市区町村のセレクト内容が変わるってやつあるじゃないですか、あれってどうやってやるんでしょう?
 いざ調べようと思ったら、そんなページどこにあるかわらなくて、ソースも見れないから、ちょっと困ってます。
 ちなみに、その場合、市区町村のデータって膨大ですよね、できればCSVデータ(すでに制作済み)を活用したいのですができますでしょうか?

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

A 回答 (2件)

http://www.geocities.co.jp/SiliconValley/4334/un …

↑これのことですよね?

上記サンプル程度の数量ならクライアント側にデータ全てを渡しても支障ないですが、
これを42都道府県全てを対象に行うというのであれば、データが大きすぎるので避けた方が良いと思います。
(何百KBというhtmlになりそうですので)

私が42都道府県対象に上記のような機能を実装するのであれば、都道府県のドロップダウンリストにonChangeイベントを付け、都道府県の情報だけサーバーに渡し、
後はサーバーサイドで対応した市区町村をクライアントに返すように作ると思います。

で、サーバーサイドにASPを利用した方法であれば、
http://www.geocities.co.jp/SiliconValley/4334/un …

にサンプルがあります。
(注:上記サイトは私が制作したわけではありませんので、あしからず)

参考まで

参考URL:http://www.geocities.co.jp/SiliconValley/4334/un …
    • good
    • 0
この回答へのお礼

ASP・・・私には無理です(笑)
お気持ちだけ、ありがとうございました。

お礼日時:2001/08/26 20:00

ご質問のページがどのように作っているかは解りませんが、JavaScriptを使って変更する事ができます。



一つ目のセレクトの値をonChangeイベントハンドラーでScriptのプログラムに渡してやって、if文で分岐した2つ目のセレクタの内容を返してやります。
しかし、都道府県の様な内容になると、先のご指摘の通り、非現実的処理だと思います。

ご希望で有れば別途サンプルを掲載します。
    • good
    • 0
この回答へのお礼

結局、都道府県から、市町村のページへ一度ジャンプさせました。ありがとうございました

お礼日時:2001/08/26 19:59

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

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

QGoogleMapsAPI都道府県市区町村町域選択

Googleマップの左カラム上部で都道府県、市区町村、町域、地番を選択できるようになっていますが、GoogleMapsAPIを用いた自分のサイトでも、こういったものを作りたいのですが、どのようにすればできるのでしょうか。

Aベストアンサー

ズームでしたら、setZoom で設定できるのでそれほど苦ではないでしょう。

> 港区の区境に破線が表示されるのですが
こちらはちょっと厄介ですね。レイヤで地味にやるしかないと思われます。

Qjsによって検索プルダウン、都道府県選択と市区町村選択を連動させたい

いつもお世話になっております。
掲題のとおり、

jsによって検索プルダウン、都道府県選択と市区町村選択を連動させたいと考えております。
東京都と都道府県選択で選択すると、市区町村選択は東京23区のみでるイメージです。

プルダウン連動のサンプルなどはあり、作ろうと思えば作れるのですが
いかんせん全国となると作業時間がかかってしまうことを懸念しております、、、

どこかにサンプルなど転がっていたら教えていただけないでしょうか、、、


どうぞよろしくお願いいたします。

Aベストアンサー

<!-- http://www.soumu.go.jp/denshijiti/code.html より作成, データ量約30kB -->
<script id=jisx0401 type=application/x-data>
01000:北海道{01100:札幌市,01202:函館市,01203:小樽市, ... ,01694:羅臼町}
02000:青森県{02201:青森市,02202:弘前市,02203:八戸市, ... ,02450:新郷村}
...
47000:沖縄県{47201:那覇市,47205:宜野湾市,47207:石垣市, ... ,47382:与那国町}
</script>

<script>
(function(D){ _=0;
_ ; function P(s){ var a = [], m, r = /(\d+?):(.+?)\{(.+?)\}/g; while (m = r.exec(s)) a.push( {code:m[1], name:m[2], locals:T(m[3])} ); return a }
_ ; function T(s){ var a = [], m, r = /(\d+?):(.+?)(?:,|$)/g; while (m = r.exec(s)) a.push( {code:m[1], name:m[2]} ); return a }
_ ; var municipalities = P(D.scripts['jisx0401'].textContent);
_ ; var localsMap = municipalities.reduce(function(p,v){p[v.code] = v.locals; return p}, {});
_ ; function O(s){ return function(d){var o = s.appendChild(D.createElement('option')); o.value = d.code; o.textContent = d.name}; }
_ ; D.addEventListener('DOMContentLoaded', function(ev){
_ ; _ ; var g = D.forms['areas'].elements['g'];
_ ; _ ; municipalities.forEach( O(g) );
_ ; _ ; g.addEventListener('change', function(ev){
_ ; _ ; _ ; var locals = localsMap[ev.target.value];
_ ; _ ; _ ; var t = D.forms['areas'].elements['t'];
_ ; _ ; _ ; while (t.firstChild != t.lastChild && t.lastChild) t.removeChild(t.lastChild);
_ ; _ ; _ ; if (locals) locals.forEach( O(t) );
_ ; _ ; }, false);
_ ; }, false);
})(document);
</script>

<form name=areas>
<select name=g><option>-</option></select>
<select name=t><option>-</option></select>
<button type=submit>go</button>
</form>

<!-- http://www.soumu.go.jp/denshijiti/code.html より作成, データ量約30kB -->
<script id=jisx0401 type=application/x-data>
01000:北海道{01100:札幌市,01202:函館市,01203:小樽市, ... ,01694:羅臼町}
02000:青森県{02201:青森市,02202:弘前市,02203:八戸市, ... ,02450:新郷村}
...
47000:沖縄県{47201:那覇市,47205:宜野湾市,47207:石垣市, ... ,47382:与那国町}
</script>

<script>
(function(D){ _=0;
_ ; function P(s){ var a = [], m, r = /(\d+?):(.+?)\{(.+?)\}/g; while (m = r.exec(s)) a.pus...続きを読む

QIEの[ツールバー]-[標準のボタン]、[アドレスバー]を消したい。

IEのツールバーの
・標準のボタン
・アドレスバー
を消す命令ってありませんか?
「Open時にダイアログ形式で開く」以外の方法を教えてください。
要は、ページ初期表示時に強制的に消したいのですが。。。

Aベストアンサー

・・・たしか、無い筈、ですねぇ。
強いて言えば、IEをキオスクモードで起動する手はありますね。

IEXPLORE -k 'ファイル名'

ですね。
目的が不明なので、役にたたないかもしれませんが(^^;

Q[[prototype]] =__proto__?

[[prototype]] と __proto__ は、同じ意味でしょうか?

Aベストアンサー

__proto__は非標準で実装依存なので、その点で同じではありません。

例えば、Firefoxの場合、下記ページに
__proto__ - JavaScript | MDN
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/Object/proto
> An Object's __proto__ property references the same object as its internal [[Prototype]]
とあるので、Firefoxに関しては同じと見なせると思います。

もっとも、__proto__を実装しているブラウザはたいてい[[Prototype]]を意図して実装していると思われますし
現実的には同じものだと考えてしまっても理解する上で特に問題は無いかと思います。

Q[javascript][DOM]getElementByIdやremoveChildの戻り値と処理の結果

以前から気になっていたけれど聞かなかったこと。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>QFUMEI テストケース1</title>
<script type="application/ecmascript">
function init(){
var hoge = document.getElementById("hoge");
var fuga = document.getElementById("fuga");

hoge.removeChild(fuga);
alert(fuga); // [object HTMLParagraphElement] ← nullではない

fuga = document.getElementById("fuga");
alert(fuga); // null
}
</script>
</head>
<body onload="init();">
<div id="hoge">
<p id="fuga">ほげ</p>
</div>
</body>
</html>

結局
fuga = getElementById("fuga")によって
何が代入されているのでしょう?

document上のp#fugaへの参照であれば
removeChildの直後
fuga = nullとなっていてもよさそうだなと思っているのですが・・・・。

hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化するし・・・・

以前から気になっていたけれど聞かなかったこと。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>QFUMEI テストケース1</title>
<script type="application/ecmascript">
function init(){
var hoge = document.getElementById("hoge");
var fuga = document.getElementById("fuga");

hoge.removeChild(fuga);
alert(fuga); // [object HTM...続きを読む

Aベストアンサー

documentに入ってないだけで、メモリ内には残っています。
removeChildした後は、documentから参照出来るかどうか、という違いですね。

//removeChildとは全く逆のパターン、appendChild
var p=document.createElement('P');
p.id='foo';
var foo=p;
alert(foo); //[object]
foo=document.getElementById('foo');
alert(foo); //null
document.body.appendChild(p);
foo=document.getElementById('foo');
alert(foo); //[object]

> hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化するし・・・・
状況がちょっとわかりませんが、

<div><p></p></div>

<div>
<p></p>
</div>
の場合の、div.firstChildは違います。
2つめのは改行が入ってるので、firstChildは匿名のテキストノードになります。
ブラウザのバグかどうかまではわかりませんが。。。

hoge.removeChild(fuga);
hoge.firstChild.nodeValue='hoge';
document.body.appendChild(fuga);

とするとどうなります?

改行を入れてなかったらhoge.firstChildはnull(スクリプトエラー)になり、
改行を入れていると、最終的には

<div id="hoge">hoge</div>
<p id="fuga">ほげ</p>

となると思います。

documentに入ってないだけで、メモリ内には残っています。
removeChildした後は、documentから参照出来るかどうか、という違いですね。

//removeChildとは全く逆のパターン、appendChild
var p=document.createElement('P');
p.id='foo';
var foo=p;
alert(foo); //[object]
foo=document.getElementById('foo');
alert(foo); //null
document.body.appendChild(p);
foo=document.getElementById('foo');
alert(foo); //[object]

> hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化する...続きを読む


人気Q&Aランキング

おすすめ情報