【Laravel】プルダウンをクリックした時に発火させる方法+その他

Question

laravel5.4を使用しています。
目的：機能としては、検索機能(カテゴリでの検索)として使おうとしておりまして、hiddenで飛ばした値を、コントローラーで受け取り、DBと照らし合わせ、DBから選択された情報を一覧に出すという内容です。

問題点は、
①プルダウンの値をプルダウンを選択(クリック)したときに発火させたいということと。
②プルダウンを多階層にしたのですが、発火は、↓のコードの<li><a href="#">テスト1</a></li>などの二層目をクリックした時に発火したいと考えています

<ul>
<li>
 <span>Test2</span>
 <ul>
  <li><a href="#">テスト1{{Form::hidden('topic', 'test1')}}</a></li>
  <li><a href="#">テスト2{{Form::hidden('topic', 'test2')}}</a></li>
  <li><a href="#">テスト3{{Form::hidden('topic', 'test3')}}</a></li>
  <li><a href="#">テスト4{{Form::hidden('topic', 'test4')}}</a></li>
  <li><a href="#">テスト5{{Form::hidden('topic', 'test5')}}</a></li>
 </ul>
</li>

よろしくお願いします

Comments

[m.ts10806]

発火した結果をどう使いたいのでしょうか。その目的により回答内容が違ってくるように思います。hiddenフィールド自体不要となるかもしれませんし。

[tonari]

了解です。　機能としては、検索機能(カテゴリでの検索)として使おうとしておりまして、hiddenで飛ばした値を、コントローラーで受け取り、DBと照らし合わせ、DBから選択された情報を一覧に出すという内容です。　わかりづらかったら申し訳ないです

[m.ts10806]

コメントでは埋もれてしまうので、お手数ですが、「目的」という形で質問本文に追記願います。

[tonari]

了解しました！ありがとうございます

Answer 1

回答までにお時間いただきすみません。

思いつくやり方としては
・クリックイベントでhiddenを取得してきてAjax通信
でしょうか。

例：※ビューは展開後のHTMLとして記述しています

<ul id="list">
<li>
 <span>Test2</span>
 <ul id="list1_1">
  <li><a href="#">テスト1<input name="topic" type="hidden" value="test1"></a></li>
  <li><a href="#">テスト2<input name="topic" type="hidden" value="test2"></a></li>
  <li><a href="#">テスト3<input name="topic" type="hidden" value="test3"></a></li>
  <li><a href="#">テスト4<input name="topic" type="hidden" value="test4"></a></li>
  <li><a href="#">テスト5<input name="topic" type="hidden" value="test5"></a></li>
 </ul>
</li>

<script>
$(function(){
	$('#list li ul li a').on('click',function(){
		code = $(this).children("input").val(); //子要素のhiddenの内容を取得

		$.ajax({
			url: "/XXXXXX", //code受け取ってDBアクセス・結果をJSONで返す処理をしているURL
			type :"post",
			dataType: "json",
			data: {
				"code" : code
			}
			}).done(function(data) {
              //取得結果をjson.parse()で配列に変換し、ループしつつ表示用HTMLとして整形

		    })
		    .fail(function() {
		     alert("失敗");
		    });
	});
});
</script>

jsonを利用しているのはPHP（今回はLaravel）でDBから取得した情報の配列をjson_decode()で返すだけで良く、受け取ったjavascript側もjson.parse()して配列に戻せてデータの加工や整形が容易だからです。
javascript側で整形が面倒であれば、dataTypeをtextやhtmlに変更し、php側で表示用のhtmlを作って返却するのでも良いです。

ただ、hiddenを利用しなくてもそれぞれ固定値を渡すようであればhiddenを使わずとも

<li><a href="#" data-topic="test1">テスト1</a></li>
<li><a href="#" data-topic="test2">テスト2</a></li>

としておき、クリックイベントで

code = $(this).data("topic"); //data属性値を取得

のようにした方がコードがスッキリするかなぁとも思います。

参考URL：
・jQuery 便利なonを使おう（on click)
・一般的なAjax通信を実装するには？（$.ajax）
・laravel5・ajax・jqueryでPOSTするサンプル
・data属性をjQueryで使ってみる

Comments

[tonari]

ありがとうございます！
本当に丁寧に教えていただき助かりました！