When we work with a select dropdown form and we need to submit this form using an ajax request, then we need to get the selected option value by jQuery or JavaScript. In this tutorial, I will show you, how to get the selected value of the dropdown in the jquery Laravel application. For this tutorial, I will create a simple HTML form. I will also show you how to get a text from the select dropdown box in jQuery.

There is a javascript event called "onchange". Using onchange event, we can get selected option value in jquery. We can get selected option value in jQuery. I will show you two ways.

jquery-select-option-value-example

So let's see the example code of jquery get selected option value onchange:

@extends('layouts.app')

@push('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    span.select2.select2-container.select2-container--classic{
        width: 100% !important;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header" style="background: gray; color:#f1f7fa; font-weight:bold;">
                    Laravel jQuery Get Selected Option Text and Value -  Laravelia
                </div>
                 <div class="card-body">                    
                    <form class="w-px-500 p-3 p-md-3" action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Framework</label>
                            <div class="col-sm-9 mt-3">
                                <span id="value"></span>
                                <select class="js-example-basic-single language" name="Language">
                                    <option value="PHP">PHP</option>
                                    <option value="Laravel">Laravel</option>
                                    <option value="Node">Node</option>
                                    <option value="React">React</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label"></label>
                            <div class="col-sm-9">
                                <button type="submit" class="btn btn-success btn-block text-white">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $('.js-example-basic-single').select2({
        theme: "classic"
    });
    $('body').on('change','.language',()=>{
        const text = $('.language').find(":selected").text();
        const value = $('.language option:selected').val();
        $('#value').html(value);
    });
</script>
@endpush

 

To get value, you can use this also:

$('body').on('change','.language',()=>{
   var text = $('.language').find(":selected").text();
   const value = $('.language').val();
   $('#value').html(value);
});

 

Read also: Laravel 9 Multiple Tags Input Form Example

 

Conclusion

Hope this jquery get selected option value onchange tutorial will help you. After completing this jquery get selected option text, your concept will be clear about get selected value of dropdown in jquery laravel. Hope this laravel ajax form select option tutorial will clear your concept about jquery get selected option value.