• ベストアンサー

セレクトメニューで選択された項目に応じて、別のセレクトメニューの内容を変更する場合について

アドバイスお願いします。 ページロード時、最初ののセレクトメニューは「国を選択してください」が選択された状態となりますが、次のセレクトメニューが空白になってしまいます。 これを最初のメニューと同じく「国を選択してください」と表示させるには、どうしたらよろしいでしょうか？ 【HTML】 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>JavaScript</title> <link rel="stylesheet" type="text/css" href="main.css" media="all"> <script type="text/javascript" src="main.js"></script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="">国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub">国を選択してください</select> </form> </body> </html> 【main.js】 window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [[ ],[ { text:"東京", value:"tokyo"}, { text:"大阪", value:"osaka"}, { text:"名古屋", value:"nagoya"} ],[ { text:"ニューヨーク", value:"ny"}, { text:"ロサンゼルス", value:"la"} ] ]; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ selObj.options[i] = new Option(optionData[selNo][i].text, optionData[selNo][i].value); } } } また、質問にありますようなセレクトメニューを実装する場合、JavaScriptとAJAX、どちらが適したものと言えるのでしょうか？

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.5

＜補足＞ value値をCGIに送信する方法は、蛇足ですよね。 別にajaxやjavascript使わなくても、 <form method="POST" action="xxx.cgi"> ---- <input type="submit" value="送信" /> </form> で送信するだけです。

editbooth
質問者

お礼

とても参考になるご意見、またアドバイスを頂きありがとうございます。 value値のセット方法について、教えて頂いた方法でうまくできそうです。 ＞selObj.options[i+1] = new Option(Citys[i], Citys[i]); この状態でvalue値を変えるには他をどう変えたらいいのか悩んでおりましたが、教えて頂いた方法を見てとても参考になりました。 当方、まだまだ知識不足なもので何をどう変えればいいのかも定かではない状態ですが、こうやって教えて頂いたものをじっくり勉強し自分の理解を深めるヒントにしていきたいと思います。 ＞それにつけても、素のjavascriptのみでXMLを扱うのは結構面倒で、参考資料も少ないのが現状です。 ＞ちなみに私は普段javascriptでXMLを扱う時は先人の方が作成して広く出回っているブラウザー非依存のxmlパーサーのライブラリーを使っています。 教えて頂いたURLを参考に私も先人の方が作成したブラウザー非依存のxmlパーサーを勉強していきたいと思います 詳しい説明をして頂き、本当にありがとうございました。

その他の回答 (4)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

>>Ajaxカテゴリーで同じような質問をされている方がおり、私もその回答を待っていました。<< 別の人だったのですか。どうも失礼しました。でも、よけいなおせっかいにならずによかったです。 正直言って私も自身のスキルアップのために回答を作っています。ですから解説するのは苦手なんですよ。 お尋ねの,都市の<option>のVALUE値もセットする件ですが、 selObj.options[i+1] = new Option(Citys[i], Citys[i]); の一つ目のアーギュメントがテキストで後ろがvalue値ですがこのサンプルでは同じにしています。 別途value値をセットするには、その値を取ってくる必要があります。 例えば、xmlで、 <city id="tokyo">tokyo,東京</city> としておいて、 var arg = Citys[i].split(","); selObj.options[i+1] = new Option(arg[1], arg[0]); としてしまう方法もありますが、とってつけたような方法ですね。 本来なら、xmlのポリシーに則って、 <city id="tokyo">東京</city> ---(1) とか、 <city>　---(2) 　<optiontext>東京</optiontext> 　<optionvalue>tokyo</optionvalue> </city> みたいにするのが、正統かもしれません。（あまりxmlくわしくないので..） xmlの構造を変えて、しかも取ってくるデータも追加するわけですから そんな時はjavascriptでxmlをパースしている部分も変更する必要があります。 (1)ならtarget_node自身のattributeノード(nodeType=3)の値を参照して、テキストノード値と一緒に格納すればよし、 (2)ならtarget_nodeの子供が増えますから、子供らのnodeNameで振り分けそれぞれのテキストノード値をと一緒に 格納すればよし、格納する配列も2次元配列Citys[][]にしておけば、 手間が省けます。まあ、少しづつ試してみる事ですね。 　それにつけても、素のjavascriptのみでXMLを扱うのは結構面倒で、参考資料も少ないのが現状です。 ちなみに私は普段javascriptでXMLを扱う時は先人の方が作成して広く出回っているブラウザー非依存のxmlパーサー のライブラリーを使っています。 http://www.kawa.net/works/js/xml/objtree.html とかGoogleの http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GXml とか、他にも多数あると思います。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

No.2のyyr446です。 セレクトのオプションをAJAXにした利点ですが、 選択させるデータをXMLで外部に作っておけば,データの変更・追加 があった時にXMLだけメンテナンスすればよいという点です。 この例のように、国、県、都市、...みたいな階層を持ち、頻繁に 更新され、項目自体が追加されるようなデータにはXMLが便利です。 （件数が膨大になれば、DB使った方がいいですが） ただし、javascript側でXMLをパースするのは、ブラウザーによる実装の 違いとか、効率とかを考えるといまいちです。サーバーサイドのプログラムで解析した結果をajaxで返した方がよいかもしれません。 一応、IE7.0とFirefox3.5でうまくいきました。ご参考までに <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title></title> <style type="text/css"></style> <script type="text/javascript" charset="utf-8"> <!-- function SetCity(country){ var xmlHttp =(window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest(); var Citys =[]; xmlHttp.onreadystatechange = GetXmlObj; if(country){ xmlHttp.open("GET","City.xml",true); xmlHttp.send(null); }else{ ResetSelectOpt(); } function GetXmlObj(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var xmlobj=xmlHttp.responseXML; var xpath_str = '//country[@id="'+ country + '"]'; var target_node; var node_list; if(window.ActiveXObject){ // IE xmlobj.setProperty("SelectionLanguage", "XPath"); node_list = xmlobj.selectNodes(xpath_str); target_node = node_list(0); for(i=1;i<target_node.childNodes.length;i++){ if(target_node.childNodes[i].nodeType==1){ Citys.push(target_node.childNodes[i].childNodes[0].nodeValue); } } }else{ // IE以外 node_list = xmlobj.evaluate(xpath_str,xmlobj,null,XPathResult.ANY_TYPE,null); target_node = node_list.iterateNext(); for(i=0;i<target_node.childNodes.length;i++){ if(target_node.childNodes[i].nodeType==1){ Citys.push(target_node.childNodes[i].textContent); } } } SetSelectOpt(Citys); } } function SetSelectOpt(Citys){ var selObj = document.getElementById("city"); while(selObj.hasChildNodes()){ selObj.removeChild(selObj.firstChild); } selObj.options[0] = new Option("都市を選択して下さい", ""); for(i=0;i<Citys.length;i++){ selObj.options[i+1] = new Option(Citys[i], Citys[i]); } } function ResetSelectOpt(){ var selObj = document.getElementById("city"); while(selObj.hasChildNodes()){ selObj.removeChild(selObj.firstChild); } selObj.options[0] = new Option("都市を選択して下さい", ""); } } // --> </script> </head> <body onload="document.form.country.selectedIndex=0;"> <form name="form" action="#"> <select name="country" id="country" onchange="SetCity(this.value)"> <option id="" value="" selected>国名を選択して下さい</option> <option id="jp" value="jp">日本</option> <option id="usa" value="usa">アメリカ</option> <option id="uk" value="uk">イギリス</option> </select> <br /> <select name="city" id="city"> <option vlaue="" selected>都市を選択して下さい</option> </select> </form> </body> </html> --------------------------------------------------- データはXMLとして外出しします。City.xmlの中身 --------------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <citydata> <country id="jp"> 日本 <city>東京</city> <city>大阪</city> <city>京都</city> </country> <country id="usa"> アメリカ <city>ニューヨーク</city> <city>ワシントン</city> <city>シカゴ</city> </country> <country id="uk"> イギリス <city>ロンドン</city> <city>リバプール</city> <city>マンチェスター</city> </country> </citydata>

editbooth
質問者

お礼

IEでも無事動作しました！ この方法だと項目が増えた時にもXMLのみを更新すればいいのでとても作業が楽になりそうな気がしてます。 ただ、申し訳ありませんが、1点教えて頂きたいことがございます。 Ajaxの教本を見ながら教えて内容を熟読しているのですが、都市を選ぶセレクトメニューのvalue値はどのように設定すればいいのでしょうか？ 最初のセレクトメニューで「日本」を選択、次のセレクトメニューで「東京」を選択した場合、東京のvalue値を"tokyo"と仮定してこの値をCGIに送信したいと思っています。 うまく伝えられず申し訳ありませんが、アドバイス頂けませんでしょうか。 よろしくお願いします。

editbooth
質問者

補足

とても詳しいご回答ありがとうございます。 Ajaxカテゴリーで同じような質問をされている方がおり、私もその回答を待っていましたが、回答がつかないようでしたので、こちらでご質問させて頂きました。 Ajaxを使い希望の動作をするには複雑な処理が必要だったためjavascriptのみでの実装を考えていましたが、とても参考になるご回答を頂き大変勉強になりました。 まずは、教えて頂いた方法を試行させて頂き、内容を考察した上で再度お礼をさせて頂ければと思います。 何度もご回答頂きありがとうございました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

AJAXのカテゴリーに同様の質問をされていたような．．． AJAXでやる例を途中まで、試して見ました（IEはだめです）。 <script type="text/javascript"> <!-- function SetCity(country){ var xmlHttp = new XMLHttpRequest(); var Citys =[]; xmlHttp.onreadystatechange = GetXmlObj; if(country){ xmlHttp.open("GET","./City.xml",true); xmlHttp.send(null); } function GetXmlObj(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var xmlobj=xmlHttp.responseXML; var xml = xmlobj.evaluate('//country[@id="'+ country + '"]',xmlobj,null,XPathResult.ANY_TYPE,null); var thisNode = xml.iterateNext(); for(i=0;i<thisNode.childNodes.length;i++){ if(thisNode.childNodes[i].nodeType==1){ Citys.push(thisNode.childNodes[i].textContent); } } SetSelectOpt(Citys); } } function SetSelectOpt(Citys){ for(i=0;i<Citys.length;i++){ alert(Citys[i]); } } } // --> </script> <body> <select name="country" id="country" onchange="SetCity(this.value)"> <option id="" value="">国名を選択して下さい</option> <option id="jp" value="jp">日本</option> <option id="usa" value="usa">アメリカ</option> <option id="uk" value="uk">イギリス</option> </select> <select name="city" id="city"> <option vlaue="">国名を選択して下さい</option> </select> </body> --------------------------------------------------- データはXMLとして外出しします。City.xmlの中身 --------------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <citydata> <country id="jp"> 日本 <city>東京</city> <city>大阪</city> <city>京都</city> </country> <country id="usa"> アメリカ <city>ニューヨーク</city> <city>ワシントン</city> <city>シカゴ</city> </country> <country id="uk"> イギリス <city>ロンドン</city> <city>リバプール</city> <city>マンチェスター</city> </country> </citydata>

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

こんばんは。 「日本」や「アメリカ」を選択したときと同じように処理すればよいのでは？ *配列は「text」と「value」の組合せに決まっているので、勝手ながら 　連想配列となっている部分をはずしてしまいました。 <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とAJAX、どちらが適したものと言えるのでしょうか？ Ajaxもjavascriptを利用するので、どちらが適しているという選択でもないような… データ量が多くて組合せが多かったり、条件判定がいろいろあったりでデータベースから選んだり、そのデータファイルの更新が別のソフトで行われていたり、他でも共通で利用していたりなどであれば迷わずAjax、固定的なデータで量がそれほどでもなく、かつ、同じデータを他でも利用するとかでなければ、通信しない分レスポンスが良いjavascriptでしょうか。

editbooth
質問者

お礼

ご回答ありがとうございます。 無事、希望通りの動作ができました。 また、最初のプルダウンでどこかの国を選択した後、再度「国を選択してください」を選択すると 次のセレクトメニューが空白になってしまうろいう現象が起きていましたが、 連想配列部分も訂正することで、こちらもうまくいくようになりました。 また、Ajaxを使うかjavascriptのみで実装するのがいいのかは目的によっても大きく違ってくると思いますので再度考察して見たいと思います。 詳しく教えて頂きありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • 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>

  • メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法

    メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法 ２つのコンボがります。 1個目は、メーカーを選択します。 ２個目は、機種を選択します。 下記ソースでは、valueの値が取得でいないようです。 （例） makerでドコモを選択したらvalueに１をセット sendwayでドコモ機種(2)を選択したらvalueに２をセット このようなことを実現したいのですが．．． よろしくお願いします。 <script language="JavaScript"><!-- menuItem = [["ドコモ機種(1)","ドコモ機種(2)"]["ドコモ以外機種"]]; function setMenuItem(n) { len = document.myForm.sendway.options.length; for (i=len-1; i>=0; i--) { document.myForm.sendway.options[i] = null; } for (i=0; i<menuItem[n].length; i++) { document.myForm.sendway.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } // --></script> <select name="maker" onChange="setMenuItem(this.selectedIndex)"> <option value="1" <?= $val?>>ドコモ</option> <option value="2" <?= $val?>>ドコモ以外</option> </select> <select name="sendway" > <option value="1" <?= $val?>>ドコモ機種(1)</option> <option value="2" <?= $val?>>ドコモ機種(2)</option> <option value="3" <?= $val?>>ドコモ以外機種</option> </select>

  • Javascriptでセレクトメニューの選択チェックの方法

    Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </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>

  • プルダウン２つで別項目に値を代入したい．その２

    同じような質問ですみません。プルダウン２つで別項目に値を代入する方法のアドバイスを参考にこんなの作ったんですがうまくいかないです。どこがおかしいですか？ <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1) { rslt=36; } else { if (v1==1 && v2==2) { rslt=29; } else { if (v1==1 && v2==3) { rslt=22; } else { if (v1==1 && v2==4) { rslt=14; } else { if (v1==1 && v2==5) { rslt=7; } else { if (v1==1 && v2==6) { rslt=0; } else { rslt='?'; }} document.getElementById('txt').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 </select>　　 <select id="s2" onChange="hoge()"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 </select><p> <input type="text" id="txt" value=""> </body> </html>

  • 条件を付けたセレクトメニューの値の取得

    JavaScriptで下記の流れの入力フォームを作成しています。 (1)一つ目のセレクトメニューで選択した項目に応じて、もう１つのセレクトメニューの内容を変更する (2)submitボタンを押すと、次のWeb画面で選択した内容を表示する (1)については色々なところのサンプルコードを参考にしつつ、なんとか作成できました。 しかし、(2)は値の受け渡しがうまく出来ずに頭を抱えています。 （unitの値もgroupの値も共に空欄が返ってくる） ◆(1)のコード： 例えばUnit1を選択すると、グループ１（１－１～１－４）が表示され、 Unit2を選択すると、グループ２（２－１～２－４）がセレクトメニューに表示されるというものです。 <TR><TD> <TD><B>Unit</B><BR>　 <select name="unit" onchange="groupSet()"> <option value="">－選んでください－</option> <option value="">Unit1</option> <option value="">Unit2</option> <option value="">Unit3</option> </select> <TD><B>Group</B><BR>　 <SELECT NAME="group"> <option value="">－選んでください－</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <script> //グループ１の配列 var group1_list=new Array( "－選んでください－","１－１","１－２","１－３","１－４"); //グループ２の配列 var group2_list=new Array( "－選んでください－","２－１","３－２","３－３","３－４"); //グループ３の配列 var group3_list=new Array( "－選んでください－","４－１","４－２","４－３","４－４"); function buSet(){ //オプションタグを連続して書き換える for ( i=1; i<5; i++ ){ //選択分岐 switch (document.selbox.unit.selectedIndex){ case 0: document.selbox.bu.options[i].text="";break; case 1: document.selbox.bu.options[i].text=group1_list[i];break; case 2: document.selbox.bu.options[i].text=group2_list[i];break; case 3: document.selbox.bu.options[i].text=group3_list[i];break; } } document.selbox.bu.selectedIndex=0;} </script> ◆(2)のやりかた request.getParameter("unit")およびrequest.getParameter("group")で値を取得し、 画面への表示＆ファイルへの保存を行っていますが、選択したgroup○○○の項目ではなく、空欄を取得しているようなのです・・・ どなたか知恵を貸してください。よろしくお願いします。

  • セレクトメニュー選択でもう一つセレクトメニューを出す

    「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。 しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。 何がおかしいのか分からないので、ぜひ教えてください。 よろしくお願いいたします。 menuItem = [　　["Ａトップ","A本部","B本部","C本部"], ["Ｂトップ","1本部","2本部","3本部"], ["Ｃトップ","あ本部","い本部","う本部"], 　　　　　　　　["Ｄトップ","●本部","▲本部","◆本部"] ]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------------------- <SELECT size="1" name="Block" onChange="setMenuItem(this.selectedIndex)"> <OPTION selected value="0">選択してください</OPTION> <OPTION value="a-block">Aブロック</OPTION> <OPTION value="b-block">Bブロック</OPTION> <OPTION value="c-block">Cブロック</OPTION> <OPTION value="d-block">Dブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="visibility:hidden"> <OPTION selected value="0">選択してください</OPTION> </SELECT>

  • セレクトメニューの選択によって次に表示されるDivを変更したい

    ここ２週間くらいずっと経験ないJSとPHPをいじってなんとか形になって来ましたが、どうしてもうまくいきません。 ものすごい初心者なので詳しく教えて頂けるとうれしいです。 【やりたい事】 (1)[県]と選択するとその県の(2)[区市町村]を選択できるセレクトメニューを表示させたい。 (1)と(2)で選んだ項目をデーターベースに保存したい。 【条件】 データーベースを購入して使用しているためID属性設定が出来ず、NAME属性設定しかできません。 【htmlソース】 <form name="sys_form"> 県を呼び出す特殊なコマンドコメント(Value=FP01～北海道)(onchange="showthis(this)"使用) <div id="FP01">北海道の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> <div id="FP02">青森県の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> ～FP47まで続く。 </form> 【JS】 function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "FP01"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "FP01"){ if(document.getElementById){ document.getElementById("FP01").style.display = "none"; } } } 上の状態で北海道は出来たのですが、47都道府県をうまく動作される方法がわかりません。 よろしければ教えて下さい。

  • ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。

    上のセレクトメニューから県名を選ぶと、下のセレクトメニューの項目が市区町村の項目になるようにセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですがエラーが出てしまいます。。。 htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:02_11}, {key:"小樽市",value:02_12}, {key:"旭川市",value:02_13}, {key:"その他市町村",value:02_099}], ["青森", {key:"青森市",value:03_01}, {key:"弘前市",value:03_02}, {key:"八戸市",value:03_03}, {key:"鳥取",value:213}], {key:"その他市町村",value:03_099}], ["岩手県", {key:"盛岡市 ",value:04_01}, {key:"宮古市",value:04_02}, {key:"大船渡市",value:04_03}, {key:"その他市町村",value:04_099}], ["宮城県", {key:"石巻市",value:05_06}, {key:"塩竈市",value:05_07}, {key:"古川市",value:05_08}, {key:"その他市町村",value:05_099}], ]; と書きましたがjavascript初心者でどこに間違いがあるのか解りません・・ すみませんがご教授のほどよろしくお願いいたします。

  • セレクトボックスの選択により、点数および配列を表示

    <html> <head> <!DOCTYPE html> <meta charset="utf-8"> <script type="text/javascript"> function change(selbox) { var txt1 = document.getElementById("txt1"); var txt2 = document.getElementById("txt2"); switch(selbox.value){ case '1': txt1.style.display = ""; txt2.style.display = "none"; break; case '2': txt1.style.display = "none"; txt2.style.display = ""; break; default: } var todo = ['メール確認', '日報送信', 'スケジュール確認', '資料作成']; var str=''; for (var i = 0; i < todo.length; i++) { str += todo[i] + '<BR>'; } document.getElementById('message_area').innerHTML = str; } </script> <body> <form name="f"> 愛媛県の県庁所在地は <select name="q1" onchange="change(this)"> <option value="">選択肢</option> <option value="1">名古屋市</option> <option value="2">松山市</option> <option value="3">金沢市</option> <option value="4">高松市</option> </select> です。 <p> 香川県の県庁所在地は <select name="q2" onchange="change(this)"> <option value="">選択肢</option> <option value="1">名古屋市</option> <option value="2">松山市</option> <option value="3">金沢市</option> <option value="4">高松市</option> </select> です。<p> 愛知県の県庁所在地は <select name="q3"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> 石川県の県庁所在地は <select name="q4"> <option>選択肢</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> テキスト１<input type="text" id="txt1" name="txt1"><BR> テキスト２<input type="text" id="txt2" name="txt2"><BR> <div id="message_area" /> <body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する