select+submit部分をonclikでsubmitしたい
不特定数の値をselectにセットし、単一選択させてsubmitしております。
これをアンカーで不特定数を全て表示し、単一選択(当り前か)させて
submitしたいと考えてます。
色々とonclikを検索しているのですが、ピンときません・・・
Aタグ+onclikで可能なのでしょうか?
元ソースは以下の通りです。
<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>
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">
<!--
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>
「<a href="view.php?sc=○○">○○</a>」。。
色々な推測、的確な回答。。ありがとうございます。
目から鱗状態です、解決することが出来ました。
まだまだ勉強中ですので、また何かございましたらご指導お願いいたします。
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の方が使い勝手がいい。
(他の方の回答のように普通にリンクにする事もできるし)
ご思案、ご指導ありがとうございます。
おかげさまで無事に解決することが出来ました。
また何かございましたら、ご指南お願いいたします。
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);
}
}
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">
<!--
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()の中身は次(字数制限が厳しくなった....)
ご思案、ご指導ありがとうございます。
おかげさまで無事に解決することが出来ました。
また何かございましたら、ご指南お願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンメニューに連動する...
-
一緒のプルダウンメニューを同...
-
return falseが効かない
-
連想配列を使ってコンボボック...
-
プルダウンの値によって活性・...
-
Selectボックスの一覧表示方法
-
javascriptだけでドロップダウ...
-
jqueryでselect要素を表示・非...
-
子ウインドウから親ウインドウ...
-
select+submit部分をonclikでsu...
-
セレクトメニューの連動について
-
セルの色>何が足りないのでし...
-
C言語クイックソートの比較総回...
-
onchangeイベントを強制的に発...
-
JavaScript ログアウト処理
-
ラジオボタン未チェックの場合...
-
Tablesorteを2行一組でソートする
-
テキストボックスの中身を選択...
-
テーブルの項目の値取得
-
javascriptでhiddenに二次元配...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
プルダウンメニューに連動する...
-
javascriptで合計金額を算出し...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
連想配列を使ってコンボボック...
おすすめ情報