javascriptでプルダウンメニューの外部ファイル化について

2023/08/09 03:25

このQ&Aのポイント

javascriptのプルダウンメニューを外部ファイル化する方法について教えてください。
また、該当メーカーを選択することで車名がプルダウンメニューに表示される仕組みについても知りたいです。
お手数をおかけしますが、よろしくお願いします。

ベストアンサー

javascriptでプルダウンメニューの外部ファイル化について

2009/09/14 20:36

以下のjavascriptを外部ファイルにしたいのですが、外部ファイル、HTML部分ともに、どのように記述すればいいのか教えて頂けませんでしょうか？よろしくお願いします。 <html> <head> <script language="JavaScript">  </script> </head> <body onLoad="Load();"> <form name="the_form" method="POST" action="" onSubmit="return Check()"> <select name="choose_category" onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);"> <OPTION value="果物" selected>果物 <OPTION value="野菜" >野菜 <OPTION value="肉" >肉 <OPTION value="魚" >魚 <OPTION value="酒" >酒 <OPTION value="菓子" >菓子 </select> <select name="the_examples"> <OPTION value="0" selected>りんご <OPTION value="1" >いちご <OPTION value="2" >みかん <OPTION value="3" >ドリアン <OPTION value="4" >ライム </SELECT> <from> </body> </html> また、次のサイト（http://www.carsensor.net/）では「メーカー・地域・価格から探す」からメーカー選択後、車名部分ではそのメーカーに該当するものが選択できますが、これは上の方法とは違うように思うのですが、どういった方法なのでしょうか？

cgicold
お礼率93% (15/16)

JavaScript
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2009/09/14 21:44 回答No.1

外部ファイルを作成するには、単純にコード部分のみを外部ファイル（ｊｓ)にして、HTMLからは<script>タグで読込めばよいです。以下のサイトを参考にしてください。＜参考＞ http://external-file.com/ja/apat.html http://allabout.co.jp/internet/javascript/closeup/CU20030521/ ご提示のページはあまりよく見てませんが、セレクトの内容に変化があるとchgSel()というfunctionが呼び出されるようになっています。 chgSel()はtop_lstcmb.jsという外部ファイル内にあります。選択された値を引数にしてajaxでphpから返された内容にオプションを書き換えるようになっているみたい。データをブラウザ側で持っているのと、サーバー側にリクエストして結果を返してもらうのとの違いとでも言えばよいでしょうか。

質問者

お礼 2009/09/15 17:57

アドバイスありがとうございます。無事、外部ファイルにすることができました。中古車のサイトについては外部ファイルも見たのですが、上位250台は最初からhtmlに記述されていますが、それ以外の車名（メーカー選択後に再ロードされる車名）がどこにも見当たらないので、どこから車名を引っ張ってきているのか分かりませんでした。サーバー側にリクエストして結果を返すということが分かりませんでしたので、とても参考になりました。複雑でなければ挑戦したいところですが、難しそうなのでもう少し自分でも調べてみようと思います。ありがとうございました。

関連するQ&A

プルダウンメニューの連動で・・・
function change(){ item_date = form.cat1.selectedIndex; item_value= form.cat1.options[item_date].value; var i; switch(item_value) { case "1": listArray = new Array(); listArray[0] = new Option("aaa","縺ゅ≠縺・quot;); listArray[1] = new Option("sss","www"); break; case "2": listArray = new Array(); listArray[0] = new Option("222","333"); listArray[1] = new Option("333","333"); listArray[2] = new Option("444","444"); listArray[3] = new Option("555","444"); break; } for(i=0;i < listArray.length;i++){ document.form.cat2.options[i] = listArray[i]; } } このようにしてみたのですが、 2を選択してから1を選択すると、2で選択した「444」と「555」が残ってしまいます。一度消してしまおうとしたのですが、document.form.cat2.reset();ではエラーが出てしまいます。(オブジェクトが選択されていない) どのようにしてクリアすれば良いのでしょうか？
- 締切済み
- JavaScript
複数のプルダウンメニューの組み合わから外部リンクを作りたい・・・
複数のプルダウンメニューからそれぞれ組み合わから外部リンクを作りたいのですが、できません。過去に、こちらで質問されている方がいましたが http://oshiete1.goo.ne.jp/qa3418973.html 回答されている方の様作成したらプルダウンが２個なら上手く動作しました。やりたいことは、全く上記の方の質問内容と同じです。今回、４個のプルダウンメニューで作成したいのですが上手くいきません・・・上記の質問にご回答されていた方のものを参考にサンプルで作成してみたのですが動作しません・・・それと、各プルダウンメニュー内で表示させたい項目が１２あるのですが簡潔にjavascriptの記述ができますでしょうか？ arr[0][0][0]= "http://www.link_0_1.com";・・・・以下の行数がとても長くなってしまうので簡潔にしたいのですが、できますでしょうか？こちら、javascriptは初心者です。どうぞ、宜しくお願いします。 ----------------------------------------------------------- <html> <head> <script Language="JavaScript">  </script> </head> <body> <form name="form1" method="GET"> カラー: <select onChange="set_color(this)"> <option value="赤">赤</option> <option value="青">青</option> <option value="黄">黄</option> </select> サイズ: <select onChange="set_size(this)"> <option value="Ｌ">Ｌ</option> <option value="Ｍ">Ｍ</option> <option value="Ｓ">Ｓ</option> </select> サイズ: <select onChange="set_inch(this)"> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> <br> <input type="button" value="検索" onClick="jump()"> <br> </form> </body> </html>
- ベストアンサー
- JavaScript
２つのプルダウンの連動に関して
２つのプルダウンの連動に関して javascript の話になってしまうかと思われますが、教えて下さい。２つのプルダウンを連動させたいと考えていますが、単純に決められた項目を初期値として設定するようなプルダウンであれば問題なくできますが、テーブルから取得したデータをプルダウンにセットした後に制御を掛けたいと考えています。以下のようなソースを活用できないか？と考えていますが、どのような方法があるでしょうか。。。。《活用ソース》 <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=JavaScript>  </SCRIPT> </HEAD> <BODY onLoad="funcMain(false)"> <FORM NAME=formMain METHOD=POST ACTION=result.asp onSubmit="return funcSubmit()"> <SELECT NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(都道府県を選択してください) <OPTION VALUE="0">東京都 <OPTION VALUE="1">大阪府 <OPTION VALUE="2">愛知県 <OPTION VALUE="3">千葉県 </SELECT> <SELECT NAME="city"> <OPTION VALUE="" SELECTED>(市町村を選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> <INPUT TYPE=submit VALUE="登録"> </FORM> </BODY> </HTML>
- ベストアンサー
- PHP
プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、どこが間違っているのでしょうか。基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
プルダウンに追加項目を加える方法
過去記事にあった下記のプルダウンを使用させて頂いております。選択できる項目を「くだもの→りんご→●●」ともうひとつ追加するにはどうしたらよいのでしょうか？どうぞよろしくお願いします。 <html> <head> <script>  </script> </head> <body onLoad="initSel()"> 　<form> 　　<p> 　　　メイン：　　　<select name="selMain" size="1" onChange="changeSel()"></select> 　　</p> 　　<p> 　　　サブ：　　　<select name="selSub" size="1"></select> 　　</p> 　</form> </body> </html>
- 締切済み
- JavaScript
javascriptでの2つのプルダウンメニューの初期値
下記の2つの連動するセレクトメニューで最初の国名のプルダウンで「日本」を選択、次の都市名のプルダウンで「東京」を選択し、その後ブラウザの戻るボタンで戻り後、再びページを表示させたり、または入力内容確認画面へ進みjavascriptのonclick="history.back()"で入力ページ（下記スクリプト記述ページ）に戻ると1つ目の国名のメニューは日本が表示されていますが、2つ目の都市名のメニューが空白になってしまいます。そのため、都市名のプルダウンで東京を表示させるには、1つ目の国名のプルダウンを一度日本以外にしてから再度日本に表示させるといった動作が必要になってしまっています。そこで、都市名のメニューを空白にさせずにそのまま表示させるように色々調べたのですが、解決策がありませんでした。そこで、せめて両方のプルダウンともに「国を選択して下さい」にした状態にはできないかと考えております。何か良い方法がありましたらば教えて頂けませんでしょうか？ <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [ ["国名を選択してください,"], ["東京,tokyo","大阪,osaka","名古屋,nagoya"], ["ニューヨーク,ny","ロサンゼルス,la"] ]; var i, tmp = []; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ tmp = optionData[selNo][i].split(","); selObj.options[i] = new Option(tmp[0], tmp[1]); } } } </script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="" selected>国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub"> <option value="">国を選択してください</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
Javascriptでセレクトメニューの選択チェックの方法
Javascriptでセレクトメニューのフォームをチェックしたいのですが、リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼">  </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
Javascriptの動的リスト作成について
Javascriptの動的リスト作成についてお世話になっています。 Javascriptで選択リストを動的に変えたいと思っています。また、Javascriptで作成したリストは、multipleとして複数選択できるようにしたいと考えています。そこで、下記のようにスクリプトを書きました。リスト２(smallwheretag)が1つのみ選択を許すときは、うまくいったのですが、multipleにするためにnameを配列にしたところ、うまくリストが作成できなくなってしまいました。なにかスクリプトに変更が必要なのでしょうか？ご教授お願いいたします。 <HTML部> <select name="bigwheretag[]" onchange="javascript:listChange(this.value);"> <option value="">検索項目</option> <option value="11%">自然</option> <option value="12%">街</option> <option value="13%">家庭</option> </select> <select name="smallwheretag[]" multiple> <option value="">大項目を選択して下さい</option> </select> <Javascript部> var where1_text = new Array("川", "海", "山", "滝", "その他"); var where1_value = new Array("1101", "1102", "1103", "1104", "1199"); flag1 = document.form.bigwheretag.value; if (flag1=="11%") { document.form.smallwheretag.length = where1_text.length; for(var i=0; i<where1_text.length; i++) { document.form.smallwheretag.options[i].text = where1_text[i]; document.form.smallwheretag.options[i].value = where1_value[i]; } }・・・・・・・・以下同様
- ベストアンサー
- JavaScript
プルダウンメニュー
　こんばんは。日時をプルダウンメニューで選択するのですが、月が変わると、内容も変わるようにしたいと思っています。JavaScriptで、出来ると聞いたのですが、やり方が解りません。このように書いてみたのですが、画面には何も表示されません。助けてください。 <SCRIPT LANGUAGE = "JavaScript"> <FORM NAME="form1" METHOD="post"> if (mm = 2){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 </SELECT>日"); } if ((mm = 4) || (mm = 6) || (mm = 9) || (mm = 11)){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 <OPTION VALUE="29">29 <OPTION VALUE="30">30 </SELECT>日"); } else{入らないので省きます。 </FORM> </SCRIPT>
- 締切済み
- JavaScript
プルダウンメニューからインラインフーム内を操作する
表題のようなものをjavascriptとフォームを使って用意しましたが、IE6、IE7の環境で試験しましたが問題ありませんでした。ところが、これをFirefoxで動かすと、プルダウンで選択してもインラインフレームはまったく変化しませんでした。どちらでも動作するようにしたいのですがどのように改変すればよろしいでしょうか。初心者でとんでもない間違いをしているかもしれませんが、どうかご教授ください。現在以下のような記述になっていますインラインフレーム名：inpage  <script type="text/"> function jump(){ var url=document.form1.select1.options[form1.select1.selectedIndex].value; if (url!="") document.inpage.location.href = url; } </script>   <FORM NAME="form1"> <SELECT NAME="select1" onChange="jump()"> <option value="">選択してください <option value="AAAAA.html">AAAAA <option value="BBBBB.html">BBBBB <option value="CCCCC.html">CCCCC </SELECT> </FORM> 
- 締切済み
- JavaScript