get selected option value jquery Example

jQuery

Today, We want to share with you get selected option value jquery Example.In this post we will show you set selected value of dropdown in jquery, hear for how to get the multiple selected value of dropdown in jquery we will give you demo and example for implement.In this post, we will learn about get dropdown selected value in jquery on page load with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

get selected option value jquery Example

There are the Following The simple About jquery select dropdown option by value Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery get selecteds option value onchange, so the get selecteds value of dropdown in jquery on change is used for this example is following below.

get selected option value jquery Example
get selecteds option value jquery Example

You can get the two types of value from the <select> HTML Form element. Based on your any need or requirement, single form data value or both values can retrive from the HTML select element.

By using val() method :

The val() jquery method is an inbuilt simple method which is used to data value return as well as set the value of some attributes for the HTML Form DOM selecteds elements.

The Simple Example is the value to be sent to the server side any, which can simply retrive using the simple jQuery code.

$("#your_selectbox_drop_down_id_name").val();

Like as HTML select box has District options with values

<select id="your_selectbox_drop_down_id_name">
    <option value="1">twitter login</option>
    <option value="2">login facebook</option>
    <option value="3">bitbucket login</option>
    <option value="4">linked in login</option>
    <option value="5">node js download</option>
    <option value="6">codeigniter download</option>
    <option value="7">webmail godaddy</option>
    <option value="8">nodejs download</option>
    <option value="9">es6 tutorial</option>
    <option value="10">laravel download</option>
</select>

jQuery Code

The following below source code will get the text value of the selecteds option using jQuery Example.

$(document).ready(function(){
    $('#your_selectbox_drop_down_id_name').on('change',function(){
        //var resultDataValue = $(this).val();
        //var resultDataValue = $('#your_selectbox_drop_down_id_name option[value="'+optionValue+'"]').text();
        var resultDataValue = $("#your_selectbox_drop_down_id_name option:selected").text();
        alert("Your Selecteds Option Text: "+resultDataValue);
    });
});

Best Solution: Useing the simple jQuery :selected Selector

simple We can use the simple jQuery source code :here below example selected selector (id, class or html tags) in attribute data value combination with the using jquery val() method to search the select Box selected option value in a simple HTML Form select box or dropdown list.

How to Get the Value of Selected Option in a Select Box Using jQuery

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select.district").change(function(){
        var selectedDistrict = $(this).children("option:selected").val();
        alert("You have selected the district - " + selectedDistrict);
    });
});
</script>
</head> 
<body>
    <form>
        <label>Select District:</label>
        <select class="district">
            <option value="sbk">Sabarkantha</option>
            <option value="snarag">Surendranagar</option>
            <option value="ddw">Devbhoomi Dwarka</option>
        </select>
    </form>
</body>
</html>

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Text - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select.district").change(function(){
        var selectedDistrict = $(this).children("option:selected").val();
        alert("You have selected the district - " + selectedDistrict);
    });
});
</script>
</head> 
<body>
    <form>
        <label>Select District:</label>
        <select class="district">
            <option>Sabarkantha</option>
            <option>Surendranagar</option>
            <option>Devbhoomi Dwarka</option>
        </select>
    </form>
</body>
</html>

Get Selected Options from Multiple Select Box

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Multiple Selected Option Value - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
    $("button").click(function(){
        var districts = [];
        $.each($(".district option:selected"), function(){            
            districts.push($(this).val());
        });
        alert("You have selected the district - " + districts.join(", "));
    });
});
</script>
</head>
<body>
    <form>
        <label>District:</label>
        <select class="district" multiple="multiple" size="5">
            <option>Sabarkantha</option>
            <option>Surendranagar</option>
            <option>Devbhoomi Dwarka</option>
            <option>Porbandar</option>
            <option>Tapi</option>
        </select>
        <button type="button">Get Values</button>
    </form>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.


Related FAQ

Here are some more FAQ related to this Article:

  1.   jQuery Ajax change dropdown list value
  2.   javascript select element by data attribute value
  3.   Laravel Datatables edit Column HTML Source Code render
  4.   jQuery Get the Text Value of Selected Option
  5.   Create a Fixed Sticky Navigation Menu Bar
  6.   Bootstrap Multiple Item Product Carousel slider
  7.   jQuery Get Selected Option From Dropdown Example
  8.   Jquery $.grep() Multiple Conditions
  9.   jQuery get value of select onChange Example
  10.   PHP Google No CAPTCHA reCAPTCHA jQuery Ajax

Leave a Reply

Your email address will not be published. Required fields are marked *