電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：waldexc
  • 質問日時：
  • 回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

構造がダメっぽいですが、とりあえず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をコメントアウトすれば、すべて開きます

この回答への補足

補足として、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は別々で動作するものと思っているのですが、認識不足でしょうか？
よろしくお願い致します。

補足日時：2009/05/25 11:11
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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>

通報する
お礼日時：2009/05/25 11:10

No.3

  • 回答者： yyr446
  • 回答日時：

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');
}
}
}
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

今後も何かありましたらよろしくお願いします。

通報する
お礼日時：2009/05/25 12:15

No.2

  • 回答者： yambejp
  • 回答日時：

＞エラー：'thisform'は宣言されていません。



ん？タイポ？
提示したのは「this.form」ですけど・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejp様
度重なる迅速なご回答ありがとうございます！

＞提示したのは「this.form」ですけど・・
申し訳ありません。記載ミスになります。。。

通報する
お礼日時：2009/05/25 12:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報