プルダウン形式の検索窓

プルダウンメニューで選択した語句をyahooで検索する検索フォームはどうやって作ればいいのでしょうか？

No.2 ベストアンサー 回答者： neosys 回答日時： 2006/11/16 15:26

ご要望を実現するためには複数のselectを1つに統合してYahooの検索に送らないといけないのでJavaScriptが必要になりますね。

考え方として、検索が押された時にselectで選択されているものをスペースの区切りで1つのhiddenのinputに入力して、このinputはname=pとすることで、Yahoo側はこれを見て検索するようになります。
また、selectで選択したものも別途送られるのは邪魔なのでそれらのvalueを消しています。

<script>
function bindKeyword(e) {
var form = e.elements;
var keyword = '';
for(var i=0;i<form.length;i++){
if(form[i].name=='key'){
if(keyword) keyword += ' ';
keyword += form[i].value;
form[i].value = null;
}
}
document.getElementById('keyword').value = keyword;
}
</script>
<!-- Begin Yahoo Search Form -->
<div style="margin:0;padding:0;font-size:14pt;border:none;background-color:#FFF;">
<form action="http://search.yahoo.co.jp/search" method="get" target="_blank" onsubmit="bindKeyword(this);" style="margin:0;padding:0;">
<p style="margin:0;padding:0;"><a href="http://search.yahoo.co.jp/" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/y … alt="Yahoo!検索" style="border:none;vertical-align:middle;padding:0;border:0;"></a>
<select name="key" style="margin:03px;width50%;">
<option value="a">a</option>
<option value="b">c</option>
<option value="c">c</option>
</select>
<select name="key" style="margin:03px;width50%;">
<option value="a">a</option>
<option value="b">c</option>
<option value="c">c</option>
</select>
<input type="hidden" name="p" id="keyword" style="display:none;">
<input type="hidden" name="fr" value="yssw" style="display:none;"><input type="hidden" name="ei" value="▲▲▲" style="display:none;"><input type="submit" value="検索" style="margin:0;"></p>
</form>
</div>
<!-- End Yahoo! Search Form -->

この回答へのお礼

詳しく解説していただきありがとうございます。
勉強になりました。

お礼日時：2006/11/16 16:01

No.1 回答者： neosys 回答日時： 2006/11/16 10:19

<!-- Begin Yahoo Search Form -->

<div style="margin:0;padding:0;font-size:14pt;border:none;background-color:#FFF;">
<form action="http://search.yahoo.co.jp/search" method="get" target="_blank" style="margin:0;padding:0;">
<p style="margin:0;padding:0;"><a href="http://search.yahoo.co.jp/" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/y … alt="Yahoo!検索" style="border:none;vertical-align:middle;padding:0;border:0;"></a>
<select name="p" style="margin:03px;width50%;">
<option value="a">a</option>
<option value="b">c</option>
<option value="c">c</option>
</select>
<input type="hidden" name="fr" value="yssw" style="display:none;"><input type="hidden" name="ei" value="▲▲▲" style="display:none;"><input type="submit" value="検索" style="margin:0;"></p>
</form>
</div>
<!-- End Yahoo! Search Form -->

検索のinput type=textの文字入力欄をselectに変えることでできるでしょう。

参考URL：http://search.yahoo.co.jp/promo/searchbox.html

この回答への補足

ご回答ありがとうございます！
できればプルダウンメニューを複数付けて同時に複数の語句を検索できるようにしたいのですが…可能でしょうか？
自分で挑戦してみましたが失敗してしまいました。
よろしければ方法を教えていただけませんか？

補足日時：2006/11/16 13:34