create dropdown example in laravel from existnig dropdown list -
i want try dependent dropdown in laravel 5. in main dropdown having several lists like(electronics,automobiles) , 1 of them click or change event. want create whole dropdown . if clicked on electronics 1 dropdown automatic generated electronics.
enter image description here if clicked on electronics first dropdown list @ time dropdown automatically generated electornics. , if clicked automobiles first dropdown list should replace last automatically created dropdown electronics.
<!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 $category) <option value='{{ $category->id }}' > {{$category->name}} </option> @endforeach </select> <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>
Comments
Post a Comment