- 締切済み
1ページ内に同じjava scriptをそれぞれ別々に作動させたい…
1ページ内に同じjava scriptをそれぞれ別々に作動させたい… 会員名簿DBで最寄の沿線・駅名を登録する際にことらのjavascriptのコードを拝借しました。 http://www.ekidata.jp/tools/smp_select01.html で、東京や大阪の都市部では最寄り駅アクセスが２～３ある場合があります。 そこで、登録する際に複数の沿線・駅名を登録できるようにしたいのですが、 同じページ内で別々のnameを持った沿線・駅名プルダウンを同時併走させる方法が 分かりません。 単純に同じものを二つ作っても、nameは音字になってしまいます。 コードのどのあたりを変更すると、お互いが影響を受けずにそれぞれ別々に動きますでしょうか？ アドバイスのほどどうぞよろしくお願い致します！
- noguri999
- お礼率12% (13/108)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
No.3、No.4、No.5 です。 ソースを読みやすくする全角スペースインデントを忘れてしまった。 みにくくなって申し訳ない。 そのかわり、そのままコピペできます。
- yyr446
- ベストアンサー率65% (870/1330)
----さらに続き コールバック関数の部分です。 var xml={}; //こいつはグローバル変数。 xml.onload = function(data){ var line = data["line"]; var station_l = data["station_l"]; var opt,scripts; for(var o=0;o < set_stations.length;o++){ scripts = document.getElementsByTagName("head")[0].getElementsByTagName("script"); for(var s=0;s<scripts.length;s++){ if(scripts[s].getAttribute("id") == set_stations[o].name + "0" && line != null){ set_stations[o].selectsets[1].appendChild(set_stations[o].initopt[1]) for(var i=0; i<line.length; i++){ opt=document.createElement("option"); opt.setAttribute("value",line[i].line_cd); opt.appendChild(document.createTextNode(line[i].line_name)); set_stations[o].selectsets[1].appendChild(opt); } document.getElementsByTagName("head")[0].removeChild(document.getElementById(set_stations[o].name + "0")); }else if(scripts[s].getAttribute("id") == set_stations[o].name + "1" && station_l != null){ set_stations[o].selectsets[2].appendChild(set_stations[o].initopt[2]) for(var i=0; i<station_l.length; i++){ opt=document.createElement("option"); opt.setAttribute("value",station_l[i].station_cd); opt.appendChild(document.createTextNode(station_l[i].station_name)); set_stations[o].selectsets[2].appendChild(opt); } document.getElementsByTagName("head")[0].removeChild(document.getElementById(set_stations[o].name + "1")); } } } } とこれで全部です。 無駄なJSONPスクリプトの後始末もちゃんとしています。 Firefox 3.6とIE8.0でうまくいきました。
- yyr446
- ベストアンサー率65% (870/1330)
----続きです。 set_station.prototype.init=function(){ this.initopt=[]; for(var i=0;i<3;i++){ this.initopt[i]=document.createElement("option"); this.initopt[i].setAttribute("value","0"); this.initopt[i].setAttribute("selected","true"); this.initopt[i].appendChild(document.createTextNode("--------")); this.selectsets[i].appendChild(this.initopt[i]); } for(var i=0;i<47;i++){ opt=document.createElement("option"); opt.setAttribute("value",i+1); opt.appendChild(document.createTextNode(this.prefs[i])); this.selectsets[0].appendChild(opt); } for(var i=0;i<2;i++){ this.selectsets[i].onchange=(function(func,type,that){ return function(e){func(e,type,that);}})(this.optchange,i,this); } } set_station.prototype.optchange=function(e,type,that){ var target=e?e.target:event.srcElement; var code=target.value; var url; if (type == 0){ for(var i=1;i<3;i++){ //沿線削除,駅削除 while(that.selectsets[i].hasChildNodes()) that.selectsets[i].removeChild(that.selectsets[i].firstChild); } that.selectsets[2].appendChild(that.initopt[2]); //駅OPTIONを空にする if (code == 0){ that.selectsets[1].appendChild(that.initopt[1]); //沿線OPTIONを空にする }else{ url = "http://www.ekidata.jp/api/p/" + code + ".json"; //沿線JSONデータURL that.ajax(url,type,that.name); } }else{ while(that.selectsets[2].hasChildNodes()) //駅削除 that.selectsets[2].removeChild(that.selectsets[2].firstChild); if (code == 0){ that.selectsets[2].appendChild(that.initopt[2]); //駅OPTIONを空にする }else{ url = "http://www.ekidata.jp/api/l/" + code + ".json"; //駅JSONデータURL that.ajax(url,type,that.name); } } } set_station.prototype.ajax=function(url,type,name){ var s=document.createElement("script"); s.setAttribute("type","text/javascript"); s.setAttribute("charset","utf-8"); s.setAttribute("id",name + type); s.setAttribute("src",url); document.getElementsByTagName("head")[0].appendChild(s); } さらに続きます。後はコールバック関数の部分です。
- yyr446
- ベストアンサー率65% (870/1330)
何セットあっても対応出来るよう、大幅に作りかえて見ました。 HTMLの部分も、いちいち最初から県名を全部書くのはうっとしいので、 下のように書いておくだけです。 <body> <form name="form" action="/php/recvtest.php" method="post"> <div id="access1"> 経路1 県：<select name="pref[]"></select> 路線：<select name="s0[]"></select> 駅：<select name="s1[]"></select> </div> <div id="access2"> 経路2 県：<select name="pref[]"></select> 路線：<select name="s0[]"></select> 駅：<select name="s1[]"></select> </div> <input type="submit"> </form> この下に、 <script type="text/javascript"><!-- var set_station1 = new set_station(document.getElementById("access1"),"set_station1"); var set_station2 = new set_station(document.getElementById("access2"),"set_station2"); set_station1.init(); set_station2.init(); var set_stations=[set_station1,set_station2]; // --> </script> のように記述します。 set_stationオブジェは何個でもOKです。 set_stationとxml_loadの定義はheadに入れておきます。 （以下がソースですが、見やすくするため全角空白を使ってますので お使いのさいは半角空白にしてください。） function set_station(div,objname){ this.name = objname; this.selectsets=div.getElementsByTagName("select"); this.prefs=["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県", "栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県", "石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県", "滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県", "岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県", "佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]; } 続く----
- yamada_g
- ベストアンサー率68% (258/374)
javascriptの ------------- function setMenuItem(type,code) { ------------ の部分を ------------ var s0; var s1; function setMenuItem(type,code,ind){ s0 = "s0-" + ind; s1 = "s1-" + ind; ------------ に、 ------------ document.form.s0. ------------ と書いてあるところを全て ------------ document.form[s0]. ------------ に、 document.form.s1. ------------ も同様に ------------ document.form[s1]. ------------ に変更します。 そして、プルダウン部分を以下のようにします。 <select name="pref" onChange="setMenuItem(0,this[this.selectedIndex].value, 1)"> 中略 </select> <select name="s0-1" onChange="setMenuItem(1,this[this.selectedIndex].value,1)"> <option selected>---- </select> <select name="s1-1"> <option selected>---- </select> <!--二つ目--> <select name="pref2" onChange="setMenuItem(0,this[this.selectedIndex].value,2)"> 中略 </select> <select name="s0-2" onChange="setMenuItem(1,this[this.selectedIndex].value,2)"> <option selected>---- </select> <select name="s1-2"> <option selected>---- </select> こうすると、複数あっても動作します。 ただ、同時併走の意味がちょっとわからないので希望の動きではないかもしれません。 他のやりかたとしては、プルダウン自体はひとつで選択した駅を複数回追加できるというのはどうでしょうか？ A駅を選んで追加、B駅を選びなおして追加...というような。
- yyr446
- ベストアンサー率65% (870/1330)
提示サンプルそのまんま利用の小改造では、困難そうですが、 このサイトのAPIを勝手に使わせてもらって、オブジェクト施工 をほどこした、scriptを作れば出来そうですね。 ちょこっとやってみようかなっと。
