プルダウン連動とリンク

選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。
一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。

プルダウンはこちらのソースを利用しています。
http://d.hatena.ne.jp/Mars/20071109
連動リンクはこちらを参考にしました。
http://air.rulez.jp/shop/java/jt_pulldown.htm

現在のソースは下記のようになっています。
プルダウンの連動とリンク、それぞれ単体での動作確認は出来たのですが、組み合わせると上手くいきません。
最初のプルダウンで「YYY」を選択し、連動して次のプルダウンに表示される「yahooかgoogle」を選択したらURL先にリンクしたいのですが。
現在はプルダウンは連動はされるものの、2つめのプルダウンで項目を選択しても何も起こらない状態です。
-----------------------------------------------------------------
<script type="text/javascript" src="ConnectedSelect.js"></script>

<form>
<select id="SEL1">
<option value="XXX">XXX</option>
<option value="YYY">YYY</option>
</select>
<select id="SEL2" onChange="top.location.href=value">
<optgroup label="XXX">
<option value="x1">x1</option>
<option value="x2">x2</option>
</optgroup>
<optgroup label="YYY">
<option value="http://www.yahoo.co.jp/">yahoo</option>
<option value="https://www.google.co.jp/">google</option>
</optgroup>
</select>
</form>
<script type="text/javascript">
ConnectedSelect(['SEL1','SEL2','SEL3']);
</script>
---------------------------------------------------------------

これはどのように修正すればリンクされるようになるでしょうか？
また別の方法があればそちらでも構いません。

ご存知の方いらっしゃいましたらご教示ください。
よろしくお願いします。

No.1 回答者： ORUKA1951 回答日時： 2014/02/10 16:58

javascriptを使用するとSEO的にも、javascriptを停止しているブラウザにもまずいですので、通常は使用しませんけど？？？

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/357 … )］より
　マウスオーバーによるプルダウンでしたら
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　のようにHTMLさえきちんと書かれていたら、CSSで行うほうが良いです。
　　上記サイトで[表示]メニュー→[スタイルシート]


　それともブラウザのアドオンのように検索文字列と検索エンジンを組み合わせようとされているのですか？

<script language="JavaScript" type="text/JavaScript">
<!--
function search(){
q = document.forms[0].q.value;
engin = document.forms[0].engin.value;
if(q!=''){
if (engin == 'yahoo') {
//alert ('yahoo');
window.open('http://search.yahoo.co.jp/search?p=' + q,"searchwindow");
} else if (engin == 'google') {
//alert ('google');
window.open('http://www.google.co.jp/search?hl=ja&q=' + q,"searchwindow");
}
}
}
//-->
</script>
・・・・・・・・・・・・・・・・
<p><form name="searchEngineChange" method="get" action="" onSubmit="search();return false;">
<select name="engin">
<option value="yahoo">Yahoo</option>
<option value="google">Google</option>
</select>
<input type="text" name="q">
<input name="" type="submit">
</form></p>

　ただ、検索エンジンによってキーワードの入力方式が異なるので、googleとyahoo!japanのようにgoogleエンジンを利用している物でないと使えません。・・・ということは検索エンジンを切り替える必要がない・・・
　他の検索エンジンも使用したいなら、一旦CGIを経由しないとなりません。