• ベストアンサー

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

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部分を構成すればリンクとして表示できるようになりますでしょうか？ご面倒なことで申し訳ないですが、よろしくご教授お願い致します。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

構造がダメっぽいですが、とりあえずselectをあたまから チェックしてhtmlに引っかかったら処理をすればいいのであれば こんな感じ・・・ <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> <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(this.form)"> </form> 途中のbreakをコメントアウトすれば、すべて開きます

waldexc
質問者

お礼

yambejp様 迅速な回答ありがとうございます！ 早速掲載していただいたコードにて試してみたのですが、エラーになってしまいました。 エラーとしては 文字：1 エラー：'thisform'は宣言されていません。 と表示されました。 ですので、 function Jump(f)→function Jump(thisform)としたり(ボタンも(thisform)にしております) onClick="Jump(this.form)"→onClick="Jump(f)"として 合わせてみたのですが、やはりエラーになりリンクが表示できない状態でした。せっかく回答いただいたのですが、お恥ずかしいですが私自身で修正を行ってもやはり簡単に直せるものではなかったです。私自身自分の能力のかなり上をいってることを行っているのは分かるのですが、何とかやり遂げたいと思います。やはり全体的な構文を載せてみたいと思いますので何度もご面倒で申し訳ないですが、ご教授いただけますでしょうか？ <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> <body> ～省略(プルダウンの項目になります)～ <input type="button" value="go" onClick="Jump(f)"> </form> </body> </head> </html>

waldexc
質問者

補足

補足として、ConnectedSelect.jsは以下となります。 function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); obj.ConnectedSelectDefault = obj.options[obj.selectedIndex].value; 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(); } function ConnectedSelectDefault(selIdList){ for(var i=0;selIdList[i];i++) { if(i){ var obj = document.getElementById(selIdList[i]); obj.disabled = true; var oSel = document.getElementById(selIdList[i-1]) var oVal = oSel.ConnectedSelectDefault; for(var OG=obj.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label != oVal) { continue; } for(var OP=OG.firstChild;OP;OP=OP.nextSibling) obj.appendChild(OP.cloneNode(true)); obj.disabled = false; break; } } } } このConnectedSelect.jsも何か関わってくるのでしょうか？自分の拙い認識ではfunctionは別々で動作するものと思っているのですが、認識不足でしょうか？ よろしくお願い致します。

その他の回答 (2)

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

form(name="form")の全セレクトオプションの中から、選択されているもののみジャンプさせる。 Jump()を呼ぶところは、 <input type=button value="go" onClick="Jump(this.form);"> jump()は function Jump(chkform){ var selects = chkform.getElementsByTagName("select"); for (var i=0;i<selects.length;i++){ for (var j=0; j < selects[i].options.length; j++){ if (selects[i].options[j].selected && selects[i].options[j].value.match(/\.html?$/)){ window.open(selects[i].options[j].value,'_blank'); } } } }

waldexc
質問者

お礼

yambejp様 yyr446様 お二人の回答を元に初めからやり直してみたところうまくリンクが表示できました！！ 本当にありがとうございました！！！ function内の内容がどのようになっているかは自分で参考サイトを元に勉強して理解できるようになります。 分かりにくい質問に的確に答えていただいて感謝しております。 今後も何かありましたらよろしくお願いします。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

＞エラー：'thisform'は宣言されていません。 ん？タイポ？ 提示したのは「this.form」ですけど・・

waldexc
質問者

お礼

yambejp様 度重なる迅速なご回答ありがとうございます！ ＞提示したのは「this.form」ですけど・・ 申し訳ありません。記載ミスになります。。。

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

関連する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> この場合にボタンを押してリンクをさせたかったのですが、エラーが表示されエラーを参照して調べたのですが、どこをどう直せばいいのか、全く間違っているのかも分からず質問させていただきました。ネットでも調べてみたのですが、どの方法が一番合うかも分かりませんでした。 拙い文章で申し訳ないですが、ご教授いただけますでしょうか？ よろしくお願い致します。

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

  • プルダウン連動とリンク

    選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。 一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。 プルダウンはこちらのソースを利用しています。 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> --------------------------------------------------------------- これはどのように修正すればリンクされるようになるでしょうか？ また別の方法があればそちらでも構いません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

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

  • 日付プルダウン選択フォーム

    専門の方が退社されて、サブ業務で多少HPの情報更新や修正をしていた私にお鉢が回ってきてしまい困っており、お教えいただけるとありがたいです。 現在のフォームですと、２ヶ月先までフォームで選択来るようになっており、今なら今年の１２月・来年の１月・来年の２月が選択可能になっているのですが これを４ヶ月先まで選択出来るようにしたい場合どのようにしたらいいのでしょうか？ 月セレクト＞１１月より後の処理＞optgroup label　forあたりの記述がイマイチ理解出来てないです。 //西暦取得 $seireki = date("Y"); //来年を取得 $rainen = date("Y",strtotime("+1 year")); //今月を取得-０をつけない⇒付ける時は"m" $tsuki = date("n"); //翌月を取得 $yokutsuki = date('n', strtotime(date('Y-m-1').' +1 month')); //再来月を取得 $saraigetsu = date('n', strtotime(date('Y-m-1').' +2 month')); //今日を取得-０を付けない⇒着ける時は"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" ){ //１０月より前の月の処理 $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{ //１１月より後の処理 $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>

  • html フォームについて教えてください

    下記内容を作成しました。 メールの画面を表示するようにしたいのですが、この時点で分からなくなりました。 <form id="form1" name="form1" method="get" action=""> <label> <select name="1" id="1"> <option value="ab@xxx.jp" selected="selected">AB</option> <option value="aa@xxx.jp">AA</option> <option value="bb@xxx.jp">BB</option> </select> </label> <p> <label> <input type="button" name="作成" id="作成" value="作成" /> </label> </p> </form> として作成ボタンを押すと、mail:(リストボックスで選んだメールアドレス）にリンクをしたいのですが、どのようにactionに設定した宝貝いいのか分かりません。 お分かりになられるかたご教授いただけませんでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 【HTML5】selectにrequierd

    HTML5でformのグループ化されたselectを必須にしたいと思い、 下記のようにrequiredを記述しました。 <select name="sample[]" required> <option value="">--</option> <optgroup label="カテゴリA"> <option value="1">選択肢１</option> <option value="2">選択肢２</option> </optgroup> <optgroup label="カテゴリB"> <option value="3">選択肢３</option> </optgroup> </select> そうすると、選択肢１を選択していても「必須項目です」と表示され、フォームが送信できません。 valueの値が1だと選択済として扱われないのでしょうか。 optgroupをなくすと選択肢１を選択した状態で送信できました。 valueの値は1で送信したいのですが、可能でしょうか。

  • 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段階目に繋げる２段階目の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(); }

  • プルダウンリンクを外部ファイルで表示させたいのですが

    下記フォームで表示されません -------------------------------------------- index.php 抜粋 <form method="post" action="jump.php"> <select name="jump_url"> <?PHP include("./define.inc"); foreach( $url as $jump_title => $jump_url){ print "<option value=\"".[key($jump_title)]."\">".[key($jump_url)]."</option>\n"; } ?> </select> <input type="submit" value="ジャンプ"> </form> ---------------------------------------- define.inc <?PHP $url[] = "グーグル" => "http://google.co.jp"; $url[] = "ヤフー" => "http://yahoo.co.jp"; $url[] = "グーグル" => "http://google.co.jp"; ?> ---------------------------------------- jump.php <?PHP $jump_url = $_POST['jump_url']; header("Location:{$jump_url}"); ?> ---------------------------------------- どうもうまく表示されません どなたかご教授くださいませんでしょうか？ よろしくお願いいたします。

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

    いつもお世話になります。 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　ココカラ============================== ちゃんと連動できて喜んでいたのですが、入力画面から確認画面に移動し、修正するために戻ると、子プルダウンの値が初期状態（選択していない状態）に戻ってしまっていました。 こちらを選択した状態を保持しておく方法はないでしょうか。 教えていただけましたら助かります。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する