dependent dropdown in laravel

form

<div class="col-sm-3 p-t-20">
    <label for="Category">Category</label>
    <select class="form-control" name="ch_Category" id="ch_Category">
        <option value="">Select Category</option>
        @foreach($objProCat as $cat)        <option value="{{$cat->id}}">{{ ucwords($cat->name) }}</option>
        @endforeach    </select>
</div>

<div class="col-sm-3 p-t-20">
    <label for="subCategory">Sub Category</label>
    <select class="form-control" name="ch_subCategory" id="ch_subCategory">
        <option value="" class="cat-0">Select Sub Category</option>
        @foreach($objProSubCat as $cat)                                            <option value="{{$cat->id}}" class="{{ "cat-".$cat->category_id}}">{{ ucwords($cat->name) }}</option>                    
        @endforeach    </select>
</div>

<div class="col-sm-3 p-t-20">
    <label for="subCategory">Product</label>
    <select class="form-control" name="ch_Product" id="ch_Product">
        <option value="" class="sub-cat-0">Select Product</option>
        @foreach($objPro as $cat)        <option value="{{$cat->id}}" class="{{ "sub-cat-".$cat->sub_category_id}}">{{ ucwords($cat->name) }}</option>
        @endforeach    </select>
</div>

Javascript

var selectedCategory = selectedSubCategory = selectedProduct = null;

$(document).ready(function () {
    function hidealloptions(){
        hideallsubcategories();
        hideallproducts();
    }

    function hideallsubcategories(){
        $("#ch_subCategory option").each(function () {
            if ($(this).value == "") {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    function hideallproducts(){
        $("#ch_Product option").each(function () {
            if ($(this).value == "") {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    hidealloptions();

    $(document).on('change', '#ch_Category', function (e) {
        e.preventDefault();
        selectedCategory = $(this).children("option:selected").val();
        $("#ch_subCategory option").each(function () {
            if ($(this).hasClass("cat-" + selectedCategory) || $(this).hasClass("cat-0")) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });

        $("#ch_subCategory").val("");
        $("#ch_Product").val("");
        hideallproducts();
    });

    $(document).on('change', '#ch_subCategory', function (e) {
        e.preventDefault();
        selectedSubCategory = $(this).children("option:selected").val();
        $("#ch_Product option").each(function () {
            if ($(this).hasClass("sub-cat-" + selectedSubCategory) || $(this).hasClass("sub-cat-0")) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        $("#ch_Product").val("");            
    });

    $(document).on('change', '#ch_Product', function (e) {
        e.preventDefault();
        selectedProduct = $(this).children("option:selected").val();
        //alert(selectedProduct);    });
    String.prototype.capitalize = function () {
        return this.toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
    };
});