ウォッチ
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部分を構成すればリンクとして表示できるようになりますでしょうか？ご面倒なことで申し訳ないですが、よろしくご教授お願い致します。
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をコメントアウトすれば、すべて開きます
この回答への補足
補足として、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は別々で動作するものと思っているのですが、認識不足でしょうか？
よろしくお願い致します。
-
-
- 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>
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');
}
}
}
}
-
-
- 0
- 件
-
yambejp様
yyr446様
お二人の回答を元に初めからやり直してみたところうまくリンクが表示できました！！
本当にありがとうございました！！！
function内の内容がどのようになっているかは自分で参考サイトを元に勉強して理解できるようになります。
分かりにくい質問に的確に答えていただいて感謝しております。
今後も何かありましたらよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。～運賃検索プログラムを完成させたい～ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
オプションメニューのアイテム...
-
リストボックス全選択について
-
Rails のコンボボックス（selec...
-
JavaScriptお知恵を貸してください
-
option + command + R は ＨＤ...
-
JavaScriptを使ったらサーブレ...
-
ダウンロードと同時に新しいペ...
-
Cookieの設定方法がわからない。
-
フォーム内の操作で・・・
-
submitをボタン以外にするには
-
複数のフォームを一括で送信す...
-
タブキーでなくエンターキーで...
-
複数の送信先を作るには・・・...
-
フォームボタンをリンク風に表示
-
ハッシュの要素を別ファイルに...
-
フォームに表示される文字を右...
-
htmlソースの書き換え
-
商品ページのフォームのテキス...
-
FireFoxでも対応できるmailtoの...
-
送信フォームから空メールが届く
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのoptionタグ部分に画像を...
-
プルダウンメニューで、選択項...
-
２つの<select>フォームの完全...
-
プルダウンメニュー項目のフォ...
-
jQuery if文の条件分岐 (。ノд...
-
VB6.0でコントロール配列の配列...
-
<SELECT>タグでの selected 状...
-
チェックボックスにチェックで...
-
オプションメニューのアイテム...
-
セレクトボックスの幅をプルダ...
-
カタカナ変換を一発でする方法
-
プルダウンメニューを選択した...
-
メール予約フォームを壊してし...
-
プルダウンメニューアイテムの...
-
プルダウンのリンクについて
-
日付リストボックスの制御について
-
プルダウン 背景色の変更
-
javascriptでプルダウンメニュ...
-
プルダウンメニューでインライ...
-
selectの選択肢の説明を表示す...
おすすめ情報
