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

質問

はじめまして。
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>

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

回答No.3

fujillin · ベストアンサー

.htmlを識別するのでよければ、2番目のほうがよさそうですね。

＞この構文を使用する場合はelseも必要になるということでしょうか？
処理内容によりますが、ご質問文から想像する範囲では、
『もしもリンクだったら（＝文字列の最後が.htmlだったら）、別ウィンドウで開く。（そうでなかったら、何もしない）』

ということになるのでしょうから、（そうでなかったら、何もしない）は書くべき処理がないので、省略できます。
　if (str.match(/\.html?$/)) window.open(str,'_blank');

if構文やwindow.openについては、javascriptの解説サイトに必ず載っていますので、正しい使用法や解説は必ずそちらで確認してください。
以下、参考までに
　http://www.tohoho-web.com/js/index.htm
　http://javascriptist.net/docs/js_ref.html
　http://www.openspc2.org/JavaScript/reference4/index.html

お礼

またまた迅速な対応ありがとうございました。

いただいた構文と参考サイトを元に作成してみたいと思います。
非常に勉強になる詳細な解説ありがとうございます。

また何かありましたよろしくお願いいたします。

回答No.2

fujillin

No1です。

実際の使用環境での、起こり得るバリエーションを想定できるのは質問者様だけですので、どのようにして区別できるかが本人がわからないとなんともしようがありませんよ。

例えば、「最後に.htmlがあるもの」で区別するならば、ごく一般的な
　http://www.aaa/bbb.html　は当然ＯＫですが、
No1のお礼にも出ている
　http://okwave.jp/qa4972283.html?ans_count_asc=1​　とか
　http://www.yahoo.co.jp/
みたいなものはリンクとみなされなくなりますし、さらには
　http://www.aaa/bbb.cgi　とか　http://aaa/bbb.php　とか
　http://www.aaa/bbb.jpeg　みたいなものにも反応しなくなります。

また、拡張子は .html .htm など複数あったりしますし、対象はどの程度までなのでしょうか？
正攻法でURLかどうかをチェックしようとすると、↓こんなんになるらしい（笑
　http://www.din.or.jp/~ohzaki/perl.htm#URI
ここまでやる必要はないにしてもどの程度なのかは、実際の利用環境次第
場合によっては、リンクでないものをチェックしたほうが簡単な場合もあるので（valueの文字列に共通の限定ができる場合）、そっちの方が簡単な場合も考えられます。

例として、『文字列中に'.html'が含まれているか』をチェックするなら
（チェックの対象文字列をstrとして）
　if (str.indexOf('.html')>-1)　が真なら含まれていると判断できます
（いきなり.htmlというのもないだろうから、 >0 でもよいと思いますが）
『文字列の最後が'.html'か'.htm'で終わる』でチェックする場合だと
　if (str.match(/\.html?$/))　のような具合になるでしょう。

2番目のように正規表現を利用すると便利な場合が多いと思うけど、どういうチェックをするかについては、やはり質問者様が決めないと誰にもわかりません。

以下、正規表現の参考までに
　http://www.site-cooler.com/kwl/javascript/15.htm

お礼

fujillin様
度々の迅速な回答ありがとうございます。

私の説明不足にて申し訳ございませんでした。しかし参考になるお話非常にありがたいです。とても参考になります。

＞どのようにして区別できるかが本人がわからないとなんともしようがありませんよ。

確かに仰る通りでございます。説明不足で申し訳ありません。区別したいものは「http://www.aaa/bbb.html」と同じで拡張子はhtmlのみを区別してリンクさせたいのです。それ以外のvalueは文字列なのですが、様々なので特定は不可能と思っております。
ですのでhtmlの拡張子のみを特定してリンクさせる方法をご教授願いますでしょうか？

＞if(str.indexOf('.html')>-1)

この構文を使用する場合はelseも必要になるということでしょうか？全くの初心者で申し訳ないですがよろしくお願いします。。。

回答No.1

fujillin

ざっと気づいた点を…

ご質問のFormは
Form
　｜-select(SEL1)
　｜-select(SEL2)
　｜-select(SEL3)
というような構造になっているので、optionのvalueを取得するのにはthisForm.options ではなく、 thisForm.Elements['SEL1'].options　とか thisForm.SEL1.options などのようにしないと対象とする要素が不明なので値を取得できません。

また、リンクがどのセレクトにあるのかも決まっていないのであれば、フォーム内の全セレクタ（例では3個）を対象にチェックする必要がありそうです。
（2つ以上のリンクが選択されていた場合、どうするのかなぁ--両方開く？片方のみ？）

さらに、いきなり　location.href = ～　としていますが、valueの内容にリンクとそうでないものがあるのなら、まず、それをチェックして、リンクならばジャンプというようにしておかないと意図通りにはならないのでは？
…で、リンクとそうでない値はどのようにして区別できるのでしょうか？
（これに回答できるのは、質問者様だけです）
質問文程度の範囲のものに限定できるのなら、拡張子「.html」が最後にあったらリンクと判定するとかできそうだけど、実際のところが不明なのでわかりません。

＞別ウィンドウにてリンクを表示したいのですが
location.href = ～　だと自ウィンドウが対象となりますので、別ウィンドウにしたければ、
window.open(url, name　…)　を使うことになるでしょう。

お礼

早々の回答ありがとうございます。
拙い質問にこれだけ回答いただき感謝しております！

＞valueの内容にリンクとそうでないものがあるのなら、まず、それをチェックして、リンクならばジャンプというようにしておかないと意図通りにはならないのでは？

仰る通りでございます。まさしくそこが問題となっているところでございます。

＞…で、リンクとそうでない値はどのようにして区別できるのでしょうか？

fujillin様が仰っている通りに拡張子「.html」でしか判別できないです。
http://okwave.jp/qa4972283.html?ans_count_asc=1
この質問のようにifを用いてリンクする場合としない場合を区別するのかと思ったのですが、if文が分からずリファレンスを扱っているホームページも参考にしてみましたが分からずご質問させていただきました。
if使用するもしくはしないでも区別できる方法をご教授いただけますでしょうか？
よろしくお願い致します。