create dropdown example in laravel from existnig dropdown list

Question

I want to try for dependent dropdown in laravel 5. In which main dropdown having several lists like(Electronics,Automobiles) and from one of them click or change event. I want to create another whole dropdown . if I clicked on Electronics than one another dropdown will be Automatic generated for electronics.

enter image description here If I clicked on electronics from first dropdown list at that time another dropdown will be automatically generated for the electornics. and than if i clicked Automobiles from first dropdown list than it should replace the last automatically created dropdown which is for electronics.

Please add some code and explain what do you want to achieve as an end result. — thefallen
– thefallen, Commented Jul 29, 2016 at 7:00

Rushikesh Solanki · Accepted Answer · 2016-07-29 07:08:39Z

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent Drop-down Demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h1>Dependent Drop-down Demo</h1>
<div class="container">
        {!! Form::open(['url'=>'Demo']  ) !!}   
        <div class="dropdown">
        <select name="category" id="category" class=" form-control">
            <option value=" "selected disabled>Select Category</option>
            @foreach($categories as $category)
                <option value='{{ $category->id }}' > {{$category->name}} </option>
            @endforeach
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <select hidden name="subcategory" id="subcategory" class=" form-control">
        </select>
        <select hidden name="semicategory" id="semicategory" class=" form-control">
        </select>


        </div>
        {!! Form::close() !!}
</div>

<script>
$("#category").on('change', function(e){

    alert("test");
    console.log(e);
     $("#semicategory").hide();
    $("#subcategory").show();
    var category_id = e.target.value;
    var s = $('<select />');
       //ajax
        $.get('/index?category_id=' + category_id, function(data){
            console.log(data);
            $("#subcategory").empty();
            $.each(data, function(index, subcatObj){
            $("#subcategory").append('<option value ="'+ subcatObj.id +'">'+subcatObj.name+'</option>');
            });
        });
    });
  $("#subcategory").on('change', function(e){
        alert("hello");
        console.log(e);
        $("#semicategory").show();
        var subcategory_id = e.target.value;
        //ajax
        $.get('/index1?subcategory_id=' + subcategory_id, function(data){
            console.log(data);
            $("#semicategory").empty();
            $.each(data, function(index, subcatObj1){
                $("#semicategory").append('<option value ="'+ subcatObj1.id +'">'+subcatObj1.name+'</option>');
            });
        });
    // $("#subcategory").hide();
    });
</script>
</body>
</html>

Collectives™ on Stack Overflow

create dropdown example in laravel from existnig dropdown list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related