select+submit部分をonclikでsubmitしたい

2010/05/11 09:35

このQ&Aのポイント

不特定数の値をselectにセットし、単一選択させてsubmitしております。これをアンカーで不特定数を全て表示し、単一選択させてsubmitしたいと考えてます。
元ソースは以下の通りです。フォームを作成し、カテゴリーの選択肢と検索ボタンを配置しています。
Aタグ＋onclikの組み合わせで実現することが可能です。選択肢を表示するアンカーをクリックすると、選択した値をsubmitするようになります。

arfor
お礼率71% (5/7)

JavaScript
回答数5
ありがとう数16

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/05/11 13:36 回答No.3

＞onclikを検索しているのですが、ピンときません onclickとかは使用しないで、単純に　<a href="view.php?sc=○○">○○</a>　などに置き換えて、リスト表示するとかではダメなのでしょうか？ phpが使える環境みたいなので、javascriptよりもphpで対応したほうが良さそうな気がしますが… * formのidがないのでforms[0]に、selectもselect[0]と仮定しています。 * form内の他の要素（input hiddenなど）は、サンプルなのでとりあえず無視しています。 <script type="text/javascript">  </script>

質問者

お礼 2010/05/17 13:11

「<a href="view.php?sc=○○">○○</a>」。。色々な推測、的確な回答。。ありがとうございます。目から鱗状態です、解決することが出来ました。まだまだ勉強中ですので、また何かございましたらご指導お願いいたします。

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

steel_gray
ベストアンサー率66% (1052/1578)

2010/05/11 13:50 回答No.5

#4です。サンプルに次の一行が抜けてました <input type="hidden" value="" name="sc">

ログインすると、全ての回答が全文表示されます。

steel_gray
ベストアンサー率66% (1052/1578)

2010/05/11 13:48 回答No.4

サンプルです。 function sample(O,setFlag){ for(var P=O.parentNode;P.nodeName!='FORM';P=parentNode); if(!setFlag) P.elements['sc'].value = O.firstChild.nodeValue; P.submit(); } <a href="javascript:void(0);" onclick="sample(this,true)">全て</a> <a href="javascript:void(0);" onclick="sample(this)">液晶テレビ</a> 以下は参考程度に。検索システムで「全部」も選べるようなシステムなら複数選択も出来た方がいいんじゃないのかな？検索フォームのmethodはgetの方が使い勝手がいい。（他の方の回答のように普通にリンクにする事もできるし）

質問者

お礼 2010/05/17 13:16

ご思案、ご指導ありがとうございます。おかげさまで無事に解決することが出来ました。また何かございましたら、ご指南お願いいたします。

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2010/05/11 12:52 回答No.2

No.1のSelectbox()の中身です。 function Selectbox(e,func){ this.node=e; this.callback=(function(func){return func;})(func); this.set=function(target){ while(target.firstChild){target.removeChild(target.firstChild);} var ul=document.createElement("UL"); for(var i=0;i<e.options.length;i++) { var li=document.createElement("LI"); var a=document.createElement("a"); a.setAttribute("href","javascript:void(0);"); a.setAttribute("name",e.options[i].value); a.appendChild(document.createTextNode(e.options[i].text)); a.onclick=(function(func,target){ return function(eve){ var t=eve?eve.target:event.srcElement; //target.selectedIndex=; target.value=t.getAttribute("name"); func(t); } })(this.callback,this.node); li.appendChild(a); ul.appendChild(li); } target.appendChild(ul); } }

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2010/05/11 12:50 回答No.1

こんなのどうでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>SelectBoxObj</title> <style type="text/css"></style> </head> <body> <div id="result">ここにリストを表示</div> <form action="view.php" method="post"> <table><tbody><tr><td>カテゴリー：<br> <select name="sc"> <option value="">全て</option> <option value="液晶テレビ">液晶テレビ</option> <option value="デジタルカメラ">デジタルカメラ</option> <option value="カメラ・光学機器">カメラ・光学機器</option> <option value="ブルーレイレコーダー">ブルーレイレコーダー</option> <option value="晶テレビ">晶テレビ</option> <option value="ジタルカメラ">ジタルカメラ</option> <option value="メラ・学機器">メラ・学機器</option> <option value="ルーレイレコーダー">ルーレイレコーダー</option> </select> </td></tr> <tr><td><input type="submit" class="w80" value="検索"></td></tr> </tbody></table><br><input type="hidden" value="あ" name="code_hint"> </form> <script type="text/javascript" charset="utf-8">  </script> </body> </html> Selectbox()の中身は次（字数制限が厳しくなった....）

質問者