Create subcategory select box onChange

让人想犯罪 __ 提交于 2019-12-01 13:37:50

问题


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

<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?

I need the best and professional way to do this.

In my Database I have

ID,   name,   parent

回答1:


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:

// 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):

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);
});



回答2:


Populate a dropdown on selecting an option from another dropdown Laravel

This might surely help you. Otherwise ask if you do not understand




回答3:


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

<?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>


来源:https://stackoverflow.com/questions/23023309/create-subcategory-select-box-onchange

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!