• 締切済み

プルダウン連動とリンク

選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。 一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。 プルダウンはこちらのソースを利用しています。 http://d.hatena.ne.jp/Mars/20071109 連動リンクはこちらを参考にしました。 http://air.rulez.jp/shop/java/jt_pulldown.htm 現在のソースは下記のようになっています。 プルダウンの連動とリンク、それぞれ単体での動作確認は出来たのですが、組み合わせると上手くいきません。 最初のプルダウンで「YYY」を選択し、連動して次のプルダウンに表示される「yahooかgoogle」を選択したらURL先にリンクしたいのですが。 現在はプルダウンは連動はされるものの、2つめのプルダウンで項目を選択しても何も起こらない状態です。 ----------------------------------------------------------------- <script type="text/javascript" src="ConnectedSelect.js"></script> <form> <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2" onChange="top.location.href=value"> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="http://www.yahoo.co.jp/">yahoo</option> <option value="https://www.google.co.jp/">google</option> </optgroup> </select> </form> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> --------------------------------------------------------------- これはどのように修正すればリンクされるようになるでしょうか? また別の方法があればそちらでも構いません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

javascriptを使用するとSEO的にも、javascriptを停止しているブラウザにもまずいですので、通常は使用しませんけど??? 【引用】____________ここから JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[ウェブマスター向けガイドライン(品質に関するガイドライン) - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )]より  マウスオーバーによるプルダウンでしたら  ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )  のようにHTMLさえきちんと書かれていたら、CSSで行うほうが良いです。   上記サイトで[表示]メニュー→[スタイルシート]  それともブラウザのアドオンのように検索文字列と検索エンジンを組み合わせようとされているのですか? <script language="JavaScript" type="text/JavaScript"> <!-- function search(){ q = document.forms[0].q.value; engin = document.forms[0].engin.value; if(q!=''){ if (engin == 'yahoo') { //alert ('yahoo'); window.open('http://search.yahoo.co.jp/search?p=' + q,"searchwindow"); } else if (engin == 'google') { //alert ('google'); window.open('http://www.google.co.jp/search?hl=ja&q=' + q,"searchwindow"); } } } //--> </script> ・・・・・・・・・・・・・・・・ <p><form name="searchEngineChange" method="get" action="" onSubmit="search();return false;"> <select name="engin"> <option value="yahoo">Yahoo</option> <option value="google">Google</option> </select> <input type="text" name="q"> <input name="" type="submit"> </form></p>  ただ、検索エンジンによってキーワードの入力方式が異なるので、googleとyahoo!japanのようにgoogleエンジンを利用している物でないと使えません。・・・ということは検索エンジンを切り替える必要がない・・・  他の検索エンジンも使用したいなら、一旦CGIを経由しないとなりません。

関連するQ&A

  • 連動プルダウンのリンクについて

    はじめまして。 javascriptをはじめて間もない初心者になりますがよろしくお願いします。 質問内容に不備がありましたら申し訳ございません。 まず行いたいことですが、ここを参考に連動プルダウンを作成しました。 http://d.hatena.ne.jp/Mars/20071109 これを元に選んだ項目によって別ウィンドウにてリンクを表示したいのですが、うまくいかずご質問させていただきました。 リンク項目は決まっておりません。例えば3項目目にあったり2項目目にあったりと。 urlをvalueに入れて参照するからと思い以下を作成してみました。 <script type="text/javascript"><!-- function jump(thisForm){ location.href = thisForm.options[thisForm.options.selectedIndex].value; } //--></script> <form name="thisForm"> <select id="SEL1"> <option value="">---</option> <option value="XXX">XXX</option> <option value="YYY">YYY</option> <option value="ZZZ">ZZZ</option> </select> <select id="SEL2"> <option value="">---</option> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="y1">y1</option> <option value="y2">y2</option> </optgroup> <optgroup label="ZZZ"> <option value="z1">z1</option> <option value="z2">z2</option> </optgroup> </select> <select id="SEL3"> <option value="">---</option> <optgroup label="x1"> <option value="x1a">x1a</option> <option value="x1b">x1b</option> </optgroup> <optgroup label="x2"> <option value="x2a">x2a</option> <option value="x2b">x2b</option> </optgroup> <optgroup label="y1"> <option value="y1a">y1a</option> <option value="xxx.xxx.html">y1b</option> </optgroup> <optgroup label="y2"> <option value="y2a">y2a</option> <option value="y2b">y2b</option> </optgroup> <optgroup label="z1"> <option value="z1a">z1a</option> <option value="z1b">z1b</option> </optgroup> <optgroup label="z2"> <option value="***.***.html">z2a</option> <option value="z2b">z2b</option> </optgroup> <input type=button value="GO" onClick="Jump(this.form)"> </form> </select> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> この場合にボタンを押してリンクをさせたかったのですが、エラーが表示されエラーを参照して調べたのですが、どこをどう直せばいいのか、全く間違っているのかも分からず質問させていただきました。ネットでも調べてみたのですが、どの方法が一番合うかも分かりませんでした。 拙い文章で申し訳ないですが、ご教授いただけますでしょうか? よろしくお願い致します。

  • プルダウンのリンクについて

    javascriptで以前にもリンクについて質問させていただいたものです。 http://okwave.jp/qa4980697.html この質問で丁寧に回答いただいたのですが、私の知識(理解力)不足の為、自分の思ったような動作をしなかったため再度質問させていただきました。 質問としては、「.html」拡張子のみをリンクとして別ウィンドウに表示したいということです。それ以外の拡張子はございません。 自分で作成したソースを記載致しますので修正点等をご教授ください。 何分初心者なので全く検討違いな構文になっているかと思いますが、ご容赦ください。 <script type="text/javascript"><!-- function Jump(){ if (str.match(/\.html?$/)) window.open(str,'_blank'); } //--></script> <body> <title>test</title> <form name="form"> <select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> <option value="bb">bb</option> </select> <select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option> </optgroup> <optgroup label="bb"> <option value="bb1">bb1</option> <option value="bb2">bb2</option> </optgroup> </select> <select name="SEL3"> <option value="">-----------</option> <optgroup label="aa1"> <option value="aa3">aa3</option> <option value="xxx.xxx.html">リンク</option> </optgroup> </select>            ~省略~ <select name="SEL10"> <option value="">-----------</option> <optgroup label="xx"> <option value="xx1">xx1</option> <option value="yyy.yyy.html">リンク2</option> </optgroup> </select> <input type=button value="go" onClick="Jump()"> </form> としたのですが、エラーで ライン:8(<html><body>があるため) 文字:14 エラー:'str'は宣言されていません。 と表示されてしまいます。 前回fujillin様に丁寧に解説していただき参考サイトまでご教授いただいたのですが、拡張子を特定して判別するという作業が理解できず再度質問させていただきました。どのようにfunction部分を構成すればリンクとして表示できるようになりますでしょうか?ご面倒なことで申し訳ないですが、よろしくご教授お願い致します。

  • Stack overflow line at:0のエラーについて

    はじめまして。 先日も質問させていただき、見事に解決できたのでまた質問させていただきます。 タイトルにもあるのですが、連動プルダウンを使用したJavascriptでエラーが出てしまいます。ネットでも色々と調べ呼び出しのメモリが不足している、キャッシュが多いなど載っていましたが、どうもPCそのものの問題ではないようです。 それ以外では構文のエラーということだったのでフリーソフトのエラーチェックを行ったのですが、特に問題はなかったです。 プルダウンは全部で20個あり初めの4個は選択後に次のプルダウンに移行すると必ずStack overflowのエラーがでます。 不躾な質問で申し訳ないですが、何か問題があるのかご教授いただけないでしょうか? よろしくお願いします。 以下は構文になります。 <html> <head> <title>テンプレtest</title> <script type="text/javascript"src="ConnectedSelect.js"></script> <script> function Jump(f){ for(var i=0;i<f.length;i++){ if(f[i].type=="select-one" && f[i].value.match(/\.html?$/)){ window.open(f[i].value,'_blank'); break; } } } </script> </head> <body> <form> 項目1<select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> </select> 項目2<select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option>     <option value="bb1">bb1</option> </optgroup></select>              ・              ・              ・              ・ 項目20<select name="SEL20"> <option value="">-----------</option> <optgroup label="zz"> <option value="zz1">zz1</option> <option value="zz2">zz2</option>     <option value="***.html">***</option> </optgroup></select> <input type="button" value="Go" onClick="Jump(this.form)"> <script type="text/javascript">ConnectedSelect (['SEL1','SEL2','SEL3','SEL4','SEL5','SEL6','SEL7','SEL8','SEL9','SEL10','SEL11','SEL12','SEL13','SEL14','SEL15','SEL16','SEL17','SEL18','SEL19','SEL20']); </script> </form> </center> </body> </html>

  • 連動プルダウン 確認画面から戻ると初期化される

    いつもお世話になります。 javascript初心者です。 以下のページを参考に、プルダウンが連動して選択肢が変わるフォームを作成しました。 http://d.hatena.ne.jp/Mars/20071109 ==HTML ココカラ============================================= <html> <head> <script src="./js/ConnectedSelect.js" type="text/javascript"></script> </head> <body> <form> <select name="sel1" id="SEL1"> <option value="" selected>--------- 選択してください ---------</option> <option value="1" >果物</option> <option value="2" >野菜</option> </select> <select name="sel12" id="SEL2"> <option value="" selected>--------- 選択してください ---------</option> <optgroup label="1"> <option value="1" >モモ</option> <option value="2" >スイカ</option> <option value="3" >ブドウ</option> </optgroup> <optgroup label="2"> <option value="4" >きゅうり</option> <option value="5" >トマト</option> <option value="6" >レタス</option> </optgroup> </select> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2']); </script> <input type="submit" value="確認"> </form> </body> </html> ==HTML ココマデ============================================= ==ConnectedSelect.js ココカラ============================== function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); } ==ConnectedSelect.js ココカラ============================== ちゃんと連動できて喜んでいたのですが、入力画面から確認画面に移動し、修正するために戻ると、子プルダウンの値が初期状態(選択していない状態)に戻ってしまっていました。 こちらを選択した状態を保持しておく方法はないでしょうか。 教えていただけましたら助かります。 よろしくお願いします。

  • 3つの連動したプルダウンメニューのフォームについて

    http://d.hatena.ne.jp/Mars/20071109 こちらのページを参考にしてフォームの中身を以下ようにしたいのです。 このような感じです <select id=”SEL1”> <optgroup label=”choise”> <option value=”fruit”>フルーツ</option> <option value=”vegetable”>野菜</option> </select> <select id=”SEL2”> <optgroup label=”fruits”> <option value=”x1”>みかん</option> <option value=”x1”>りんご</option> <option value=”x1”>メロン</option> </optgroup> <optgroup label=”vegetable”> <option value=”x1”>キャベツ</option> <option value=”x1”>きゅうり</option> <option value=”x1”>トマト</option> </optgroup> </select> <select id=”SEL3”> <optgroup label=”x1”> <option>1個</option> <option>2個</option> <option>3個</option> <option>4個</option> <option>5個</option> <option>6個</option> </optgroup> </select> このようにプルダウンメニューを3階層にして、3段階目に繋げる2段階目のoption valueは全て同じにしたいのですが、 そうすると、フォームで送信した結果が select id=SEL2 のところで全てが ”x1”になってしまい各商品の名前を出すことができません。 何か方法があれば教えてください。 使っているジャバスクリプトは以下です function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); }

  • javascriptで選択肢が分かれるプルダウンでcgiにデータを送るには?

    下記のように、javascriptで選択肢が変化するプルダウンを使用してcgiにデータを送りたいのですが、この方法ですと一番最初の選択肢である「果物・肉」の部分のデータしかcgiに送れません。 例えば「果物・梨・20世紀梨」や「肉・鶏肉・比内地鶏」というように、選択したすべてのデータをcgiに送れるようにするにはどうすればよいのでしょうか? 分かりづらい説明で申し訳ありません。 補足説明致しますので、どうかご教授下さいますようお願い致します。 以下がサンプルソースです。 <html> <head> <script type="text/javascript"> <!-- function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); } --> </script> </head> <body> <form method="POST" action="http://www.●●.com/●●.cgi"> <input type="hidden" name="mode" value="regist" /> <select name="item" id="sel1"> <option value="果物">果物</option> <option value="肉">肉</option> </select> <select name="" id="sel2"> <optgroup label="果物"> <option value="梨">梨</option> <option value="りんご">りんご</option> </optgroup> <optgroup label="肉"> <option value="牛肉">牛肉</option> <option value="鶏肉">鶏肉</option> </optgroup> </select> <select name="" id="sel3"> <optgroup label="梨"> <option value="20世紀梨">20世紀梨</option> <option value="ラフランス">ラフランス</option> </optgroup> <optgroup label="りんご"> <option value="ふじ">ふじ</option> <option value="つがる">つがる</option> </optgroup> <optgroup label="牛肉"> <option value="和牛">和牛</option> <option value="アメリカ牛">アメリカ牛</option> </optgroup> <optgroup label="鶏肉"> <option value="名古屋コーチン">名古屋コーチン</option> <option value="比内地鶏">比内地鶏</option> </optgroup> </select> <script type="text/javascript"> ConnectedSelect(['sel1','sel2','sel3']); </script> <input type="submit"></form> </body> </html>

  • プルダウンを外部リンクする

    ドリームウィーバーで作業しています。 プルダウンの項目がたくさんあるのでCSSやjavaスクリプトのように外部リンクしていろんなページに適用したいのですが可能でしょうか? htmlのソースではプルダウンで <select name="select" id="select"> <option value="01.html">01</option> <option value="02.html">02</option> ・・・以下略 </select> のようになっている部分(仮)を外部リンクに出来たらと思います。

  • 2つのプルダウンボックスの連動について

    <SELECT><OPTION></OPTION></SELECT>タグで作るプルダウンボックスについて質問です。 AとBの二つのプルダウンボックスを設置し、Aで選択された項目に合わせて、Bの表示項目を変更させたいと思っています。 この2つのプルダウンボックスを連動させる方法について、JAVAスクリプトを使った方法を知りましたが、利用者がブラウザでJAVAを切っていた場合は正常に機能しないのでしょうか? 利用者がブラウザでJAVAを切っていた場合にも対応できる連動の方法があればぜひ教えてください。

    • ベストアンサー
    • HTML
  • 日付プルダウン選択フォーム

    専門の方が退社されて、サブ業務で多少HPの情報更新や修正をしていた私にお鉢が回ってきてしまい困っており、お教えいただけるとありがたいです。 現在のフォームですと、2ヶ月先までフォームで選択来るようになっており、今なら今年の12月・来年の1月・来年の2月が選択可能になっているのですが これを4ヶ月先まで選択出来るようにしたい場合どのようにしたらいいのでしょうか? 月セレクト>11月より後の処理>optgroup label forあたりの記述がイマイチ理解出来てないです。 //西暦取得 $seireki = date("Y"); //来年を取得 $rainen = date("Y",strtotime("+1 year")); //今月を取得-0をつけない⇒付ける時は"m" $tsuki = date("n"); //翌月を取得 $yokutsuki = date('n', strtotime(date('Y-m-1').' +1 month')); //再来月を取得 $saraigetsu = date('n', strtotime(date('Y-m-1').' +2 month')); //今日を取得-0を付けない⇒着ける時は"d" $hi = date("j"); //指定した月の日数を取得 $tsukihi = date("t"); //翌月の日数を取得 $yokutsukihi = date("t",mktime(0, 0, 0, date("m")+1, 1, date("Y"))); //再来月の日数を取得 $saraigetsuhi = date("t",mktime(0, 0, 0, date("m")+2, 1, date("Y"))); //print"".$seireki.$tsuki.$hi."今月の日数".$tsukihi."翌月".$yokutsuki."翌月の日数".$yokutsukihi; //11月になったら来年をセレクト可能にする if($tsuki >= "11"){ $tougetsu = "<select id=\"SEL1\" name=\"year\">\r\n<option value=\"\">---</option>\r\n<option value=\"$seireki\">{$seireki}年</option>\r\n<option value=\"$rainen\">{$rainen}年</option></select>\r\n"; }else{ $tougetsu = "<select id=\"SEL1\" name=\"year\">\r\n<option value=\"\">---</option>\r\n<option value=\"$seireki\">{$seireki}年</option>\r\n</select>\r\n"; } //月のセレクト $tsuki1 = date("n"); if($tsuki1 <= "10" ){ //10月より前の月の処理 $tsuki_select = "<select id=\"SEL2\" name=\"month\">\r\n<option value=\"\">---</option>\r\n<optgroup label=\"".$seireki."\">"; for($k = $tsuki1; $k <= $tsuki1 + 2; $k++){ $tsuki_select .= "<option value=\"".$k."\">".$k."月</option>\r\n"; } $tsuki_select .="</optgroup>\r\n</select>"; }else{ //11月より後の処理 $tsuki2 = $yokutsuki; $tsuki3 = $saraigetsu; $tsuki_select = "<select id=\"SEL2\" name=\"month\">\r\n<option value=\"\">---</option>\r\n<optgroup label=\"".$seireki."\">"; for($k = $tsuki1; $k < $tsuki1 + $tsuki2; $k++){ $tsuki_select .= "<option value=\"".$k."\">".$k."月</option>\r\n"; } $tsuki_select .="</optgroup> <optgroup label=\"".$rainen."\">"; for($t = 1; $t <= $tsuki3; $t++){ $tsuki_select .= "<option value=\"".$t."\">".$t."月</option>\r\n"; } $tsuki_select .="</optgroup></select>\r\n"; } //日付のセレクト(当月) $day_select ="<select id=\"SEL3\" name=\"day\"> <option value=\"\">---</option> <optgroup label=\"".$tsuki."\">\r\n"; for($i = $hi; $i <= $tsukihi; $i++){ if(isset($hi) && $hi == $i){ $day_select .="<option value=\"".$i."\" selected=\"selected\">".$i."日</option>\r\n"; }else{ $day_select .="<option value=\"".$i."\">".$i."日</option>\r\n"; } } $day_select .="</optgroup> <optgroup label=\"".$yokutsuki."\">\r\n"; for($j = 1; $j <= $yokutsukihi; $j++){//翌月分 $day_select .="<option value=\"".$j."\">".$j."日</option>\r\n"; } $day_select .="</optgroup> <optgroup label=\"".$saraigetsu."\">\r\n"; for($l = 1; $l <= $saraigetsuhi; $l++){//翌々月分 $day_select .="<option value=\"".$l."\">".$l."日</option>\r\n"; } $day_select .="</optgroup></select>\r\n"; ----表示部---- <td>  <?= $tougetsu ?> <?= $tsuki_select ?> <?= $day_select ?> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> </td>

  • 2つのプルダウンを連動させる

    2つプルダウンがあったとき片方で選択した内容に応じもう一方のプルダウンの内容が 変更されるように以下のようなコードを書いてみました。 しかし、これだと1番目のプルダウンでAを選択した後、Bを選択しなおすと 2番目のプルダウンの選択肢には前回Aを選んだ時に表示されていた内容が 残ってしまいます。そこで 連動するプルダウンの内容を作成する処理(Forループの処理)の直前で  for (i=0; i<itemNum; i++) {   document.myForm.tableName.options[i] = new Option(null, null);  } という初期化処理を書いてみたのですが結果は同じでした。 解決するための何か良い方法はございますでしょうか。 <html> <head> <title>プルダウン連動サンプル</title> <script type="text/javascript"> table_name = [["10", "9", "8", "7", "6"], ["りんご", "メロン", "バナナ"], ["嵐"]]; function setMenuItem(n) { itemNum = table_name[n].length; // 項目数 //連動するプルダウンの内容を作成 for (i=0; i<itemNum; i++) { alert(table_name[n][i]); document.myForm.tableName.options[i] = new Option(table_name[n][i], table_name[n][i]); } //プルダウンの先頭を選択 document.myForm.tableName.options[0].selected = true; } </script> </head> <body onLoad="setMenuItem(0)"> <form name="myForm"> <select name="database" onChange="setMenuItem(this.selectedIndex)"> <option selected>A</option> <option>B</option> <option>C</option> </select> <select name="tableName"> </select> </form> </body> </html>