- ベストアンサー
select+submit部分をonclikでsubmitしたい
- 不特定数の値をselectにセットし、単一選択させてsubmitしております。これをアンカーで不特定数を全て表示し、単一選択させてsubmitしたいと考えてます。
- 元ソースは以下の通りです。フォームを作成し、カテゴリーの選択肢と検索ボタンを配置しています。
- Aタグ＋onclikの組み合わせで実現することが可能です。選択肢を表示するアンカーをクリックすると、選択した値をsubmitするようになります。
- arfor
- お礼率71% (5/7)
- JavaScript
- 回答数5
- ありがとう数16
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞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"> <!-- var f = document.getElementsByTagName("form")[0]; var select = f.getElementsByTagName("select")[0]; var i, opt = select.options; var sname = "?" + select.name + "="; var list, a, ul = document.createElement("ul"); f.parentNode.insertBefore(ul, f); for (i=0; i<opt.length; i++) { a = document.createElement("a"); a.appendChild(document.createTextNode(opt[i].text)); a.setAttribute("href", f.action + encodeURI(sname + opt[i].value)); list = document.createElement("li"); list.appendChild(a); ul.appendChild(list); } f.style.display = "none"; //--> </script>
その他の回答 (4)
- steel_gray
- ベストアンサー率66% (1052/1578)
#4です。 サンプルに次の一行が抜けてました <input type="hidden" value="" name="sc">
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです。 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の方が使い勝手がいい。 （他の方の回答のように普通にリンクにする事もできるし）
お礼
ご思案、ご指導ありがとうございます。 おかげさまで無事に解決することが出来ました。 また何かございましたら、ご指南お願いいたします。
- yyr446
- ベストアンサー率65% (870/1330)
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)
こんなのどうでしょうか？ <!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"> <!-- my_callback=function(target){ if(window.confirm(target.getAttribute("name")+"を送信します")){ document.getElementsByTagName("form")[0].submit(); } } mySelectbox=new Selectbox(document.getElementsByName("sc")[0],my_callback); mySelectbox.set(document.getElementById("result")); // --> </script> </body> </html> Selectbox()の中身は次（字数制限が厳しくなった....）
お礼
ご思案、ご指導ありがとうございます。 おかげさまで無事に解決することが出来ました。 また何かございましたら、ご指南お願いいたします。
お礼
「<a href="view.php?sc=○○">○○</a>」。。 色々な推測、的確な回答。。ありがとうございます。 目から鱗状態です、解決することが出来ました。 まだまだ勉強中ですので、また何かございましたらご指導お願いいたします。