はじめまして。
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ベストアンサー
- 回答日時:
.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/in …
またまた迅速な対応ありがとうございました。
いただいた構文と参考サイトを元に作成してみたいと思います。
非常に勉強になる詳細な解説ありがとうございます。
また何かありましたよろしくお願いいたします。
No.2
- 回答日時:
No1です。
実際の使用環境での、起こり得るバリエーションを想定できるのは質問者様だけですので、どのようにして区別できるかが本人がわからないとなんともしようがありませんよ。
例えば、「最後に.htmlがあるもの」で区別するならば、ごく一般的な
http://www.aaa/bbb.html は当然OKですが、
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
- 回答日時:
ざっと気づいた点を…
ご質問の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使用するもしくはしないでも区別できる方法をご教授いただけますでしょうか?
よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンメニューアイテムの...
-
セレクトボックスの値による入...
-
複数のプルダウンからリンクす...
-
VB6.0でコントロール配列の配列...
-
HTMLのoptionタグ部分に画像を...
-
GETをPOSTに変更したところ 送...
-
1アクションでPOST・GET、両方...
-
長文のmailtoの使い方
-
複数のフォームを一括で送信す...
-
フォームに入力した値をURLに付...
-
checkboxを「変更不可」にでき...
-
リンクをクリックした時にform...
-
submitをボタン以外にするには
-
URL パラメータを使ってフォー...
-
入力フォームの javascript で ...
-
チェックボックスにチェックを...
-
親ページからインラインフレー...
-
フォームからsubmitをした後再...
-
<a href=**?***=***>をGET方式で
-
送信ボタン押下時に値が未入力...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
セレクトボックスを切り替える...
-
プルダウンメニューを選択した...
-
プルダウンメニューで、選択項...
-
switch文のswitch(n)の部分を複...
-
プルダウンメニュー項目のフォ...
-
プルダウンメニューアイテムの...
-
リストボックス全選択について
-
クリックすると下に項目が出て...
-
セレクトボックスの値による入...
-
HTMLのoptionタグ部分に画像を...
-
複数のプルダウンの値をパラメ...
-
Rails のコンボボックス(selec...
-
セレクトボックスを2つ設けて選...
-
<SELECT>タグでの selected 状...
-
プルダウンメニューでインライ...
-
セレクトボックスの幅をプルダ...
-
連動プルダウンのリンクについて
-
IE6とIE8のSELECTタグの11と31
-
<SELECT>の<option value="#">...
-
複数のプルダウンメニューの作...
おすすめ情報