【问题标题】:Create subcategory select box onChange创建子类别选择框 onChange
【发布时间】:2014-05-26 05:48:04
【问题描述】:

我正在创建一个类别系统,用户可以在其中从数据库中选择类别,并在他们选择后创建另一个带有该类别子类别的选择框。

那么,我的问题是我怎样才能做到最好?

顺便说一句,我使用的是 Laravel 框架,第一类很简单

<select>
    @foreach(Category::all() as $k)
      <option value="{{ $k['id'] }}">{{ $k['name'] }}</option>
    @endforeach
</select>

但是在他们选择了一个类别后我应该怎么做?是不是更好地执行 AJAX 调用来发送选择的类别的 ID 并返回子类别或什么?

我需要最好和专业的方法来做到这一点。

在我的数据库中

ID,   name,   parent

【问题讨论】:

    标签: javascript php jquery mysql laravel


    【解决方案1】:

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

    在服务器端,像这样创建一个路由(你可以使用控制器和 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

      这肯定会对您有所帮助。不然不懂就问

      【讨论】:

        【解决方案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>
        

        类别:

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2019-08-28
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多