Onchange 功能无法使用 laravel5答案

【问题标题】：Onchange function not working using laravel5Onchange 功能无法使用 laravel5
【发布时间】：2015-12-30 09:25:57
【问题描述】：

当我从同一个表中选择第二个类别时，我的 onChange() 函数无法使用 Laravel 5 工作。我可以获得第一个类别 ID。 onchange() 函数是问题所在。我需要改变什么？

控制器

public function ajax_select_sub_second_cat(){
    $id =  $_GET['id'];
    $main_cat = Category_model::get_sub_category_ajax($id);
    //return view('siteadmin.add_cat',['main_cat' => $category]);
    if($main_cat){
        $return  = "";
        $return  = "<option value='0'> -- Select -- </option>";
        foreach($main_cat as $main_cat_ajax) {
            $return .= "<option value='".$main_cat_ajax->sub_category1."'> ".$main_cat_ajax->sub_category1." </option>";        
        }
        echo $return;
    } else {
        echo $return = "<option value='0'> --Select-- </option>";
    }
}

查看

<select id="subcategory" name="product_sub_category" onChange="getCat1(this.value);"> 
    <option value="">-----Select Standard-----</option>
</select>
<script>
    function getCat1(id){
        var passData = 'id='+id;
        $.ajax( {
            type: 'get',
            data: passData,
            url: '<?php echo url('ajax_select_sub_second_cat'); ?>',
            success: function(responseText){  
                if(responseText){ 
                    $('#subcategory2').html(responseText);            
                }
            }   
        }); 
    }
</script>

【问题讨论】：

你的意思是jquery on change ？

标签： javascript ajax laravel-5.1 onchange

【解决方案1】：

我假设您需要在选项选择的更改事件中执行一些操作..

你可以这样做

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    alert(optionSelected);
});

您可以在此处触发任何 ajax 调用或您希望执行的任何操作，optionSelected 是被选中的项目。

希望这对您有所帮助。

【讨论】：

【解决方案2】：

1- 首先，您必须确保事件在更改时触发并点击 url。

2- 检查您的控制台。您应该使用 alert 方法来确保函数正常运行。

alert(id);

如果每次更改都没有显示警报，请检查您的下拉代码

<option value="id">Name</option>

所有下拉值都必须采用这种格式。

3- 毕竟替换

url: '<?php echo url('ajax_select_sub_second_cat'); ?>',

到

url: 'ajax_select_sub_second_cat',

确保在路由文件中定义了 ajax_select_sub_second_cat，否则它将不起作用。

希望您不会遇到任何问题。您应该在发出 ajax 请求时使用控制台，这将有很大帮助并节省您的时间。

【讨论】：

【解决方案3】：

问题的可能原因：

您的 url 属性的值存在语法错误 AJAX 请求：

url: '<?php echo url('ajax_select_sub_second_cat'); ?>',

因为未连接的单引号会导致语法错误。

正确的方法是：

url: "<?php echo url('ajax_select_sub_second_cat'); ?>",

您的代码写得不错，并且可能足够公平以解决您手头的问题。不过，如果您不将 JavaScript/jQuery 代码与 PHP 混在一起，它可能会变得更简洁更好。

请看下面我的建议：

PHP

首先，由于您在控制器中有ajax_select_sub_second_cat，如果您还没有为它设置路由，您可以在routes.php 中这样做：

Route::post('getSubCategories', 'theController@ajax_select_sub_second_cat');

如果您将 Laravel 的 Illuminate\Http\Request 类注入/类型提示到方法中，则可以通过任何方法 GET 或 POST 访问您发布的数据：

public function ajax_select_sub_second_cat(Request $request) // inject the HTTP request in the method
{
     //get the id of the selected field via post request
     $id = $request->input('id');

     //assuming that your Category_model returns the models
     $sub_cats = Category_model::get_sub_category_ajax($id);
     // ...

接下来，您可以将其作为 JSON 编码的数据集/数组回显，而不是将您的数据回显为 html：

     // ...
     echo json_encode($sub_cats->toArray());
 }

jQuery

您可以使用 jQuery 本身处理由 DOM 元素触发的 change 事件，尽管使用 onchange 作为元素的属性不是问题。要让 jQuery 处理这个问题，请使用 change() 方法：

$(function(){   
    $('#subcategory').change(function(){
        var selectedVal = $('#subcategory option:selected').text(); //this is how you get the selected value with jQuery
        $.ajax({
            type: "POST",
            url: "{{ url('getSubCategories') }}",
            data: {
                id: selectedVal
            },
            dataType: 'json', // force the ajax request to return json data
            success: function(returnedData){
                 // ...
            }
        });
    });
});

现在假设您已经回显了一组子类别，在 AJAX 请求的 success 处理程序中迭代返回的子类别集并相应地填充第二个选择。

查看 jQuery 的 $.each() 以了解集合的迭代。

【讨论】：