プルダウン形式の検索窓

質問

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

回答No.2

neosys · ベストアンサー

ご要望を実現するためには複数の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/ysearch_logo_110_22.gif" 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 -->

お礼

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

回答No.1

neosys

<!-- 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/ysearch_logo_110_22.gif" 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

補足

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