[英]Create subcategory select box onChange
I am creating a category system where users can select category from DB and after they select it creates another select box with subcategory of that category. 我正在创建一个类别系统,用户可以从数据库中选择类别,然后在用户选择它之后,创建另一个具有该类别子类别的选择框。
So, my question is how can I do it the best way? 所以,我的问题是如何才能做到最好?
BTW I am using Laravel Framework and first category is simple 顺便说一句,我正在使用Laravel Framework,第一类很简单
<select>
@foreach(Category::all() as $k)
<option value="{{ $k['id'] }}">{{ $k['name'] }}</option>
@endforeach
</select>
But what should I do after they pick a category? 但是,他们选择一个类别后该怎么办? Is it better to do the AJAX call to send the ID of picked category and returns the subcategory or what?
进行AJAX调用以发送选择的类别的ID并返回子类别还是更好?
I need the best and professional way to do this. 我需要最好和专业的方法来做到这一点。
In my Database I have 在我的数据库中
ID, name, parent
Populate a dropdown on selecting an option from another dropdown Laravel 从另一个下拉列表中选择一个选项时填充一个下拉列表
This might surely help you. 这肯定会对您有所帮助。 Otherwise ask if you do not understand
否则请问您是否不明白
Use ajax
, after selecting the category
send the ajax
request and to do this you need to use change
event on your select
, for example: 使用
ajax
,在选择category
发送ajax
请求,并执行此操作,您需要在select
上使用change
事件,例如:
// Assumed category is id of the select
$('#category').on('change', function(){
var id = $(this).val();
$.getJSON("subcategory/" + id , function(data){
// Assumed subcategory is id of another select
var subcat = $('#subcategory').empty();
$.each(data, function(k, v){
var option = $('<option/>', {id:k, value});
subcat.append(option);
});
});
});
On the server side, create a route like this (You may use a controller and Eloquent): 在服务器端,创建如下路由(您可以使用控制器和Eloquent):
Route('subcategory/{id}', function($id){
// Get the data from database according to the id
// Build an array as: id => value and then return
return Response::json($subcat);
});
select_cat.php select_cat.php
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".category").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "select_subcat.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subcat").html(html);
}
});
});
});
</script>
Category : 分类:
<select name="category" class="category">
<option selected="selected">--Select Category--</option>
<?php
include('databasefile');
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
$sql=mysql_query("select cat_name from category order by cat_name");
while($row=mysql_fetch_array($sql))
{
$cname=$row['cat_name'];
echo '<option value="'.$cname.'">'.$cname.'</option>';
} ?>
</select> <br/><br/>
SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>
2.select_subcat.php 2.select_subcat.php
<?php
include('databasefile);
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select s_name from subcat_l1 where cat_name='$id'");
while($row=mysql_fetch_array($sql))
{
$sname=$row['s_name'];
echo '<option value="'.$sname.'">'.$sname.'</option>';
}
}
?>
SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.