Here, I will let you know very simple example of generate select box using select2 jquery plugin in laravel application. Bootstrap provide very simple drop-down box. But if you want to add search with select box then you should use select2 js plugin.
Select2 plugin provide us select drop-down box with search value and there are several feature available in select2 js. So in this example i am going to give you very basic example of select2 js.
Let's see bellow full example code:
Blade File:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Select2 Example</title>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel Select2 Example</h1>
{!! Form::open() !!}
{!! Form::select('status', ['Pending', 'Active', 'De-Active'], null, ['class' => 'form-control sel-status']) !!}
{!! Form::close() !!}
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".sel-status").select2();
});
</script>
</html>
I hope you found your best solution....
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example