- ベストアンサー
プルダウンのリンクについて
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部分を構成すればリンクとして表示できるようになりますでしょうか？ご面倒なことで申し訳ないですが、よろしくご教授お願い致します。
- waldexc
- お礼率87% (7/8)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
構造がダメっぽいですが、とりあえず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をコメントアウトすれば、すべて開きます
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
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'); } } } }
お礼
yambejp様 yyr446様 お二人の回答を元に初めからやり直してみたところうまくリンクが表示できました！！ 本当にありがとうございました！！！ function内の内容がどのようになっているかは自分で参考サイトを元に勉強して理解できるようになります。 分かりにくい質問に的確に答えていただいて感謝しております。 今後も何かありましたらよろしくお願いします。
- yambejp
- ベストアンサー率51% (3827/7415)
＞エラー：'thisform'は宣言されていません。 ん？タイポ？ 提示したのは「this.form」ですけど・・
お礼
yambejp様 度重なる迅速なご回答ありがとうございます！ ＞提示したのは「this.form」ですけど・・ 申し訳ありません。記載ミスになります。。。
お礼
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>
補足
補足として、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は別々で動作するものと思っているのですが、認識不足でしょうか？ よろしくお願い致します。