Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery selected selector

Suggested Videos
Part 11 - jQuery checked selector
Part 12 - Select values of checkbox group with jquery
Part 13 - jQuery get selected checkbox text



In this video we will discuss jQuery :selected selector.



To select all checked checkboxes or radio buttons, we use :checked selector. To select all selected options of a select element use :selected selector

How to get selected option from single select dropdown in jquery : We want to get the selected option text and value
jquery get selected option value

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#selectCountries').change(function () {
                var selectedOption = $('#selectCountries option:selected');
                $('#divResult').html('Value = ' + selectedOption.val()
                    + ', Text = ' + selectedOption.text());
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    Country:
    <select id="selectCountries">
        <option selected="selected" value="USA">United States</option>
        <option value="IND">India</option>
        <option value="UK">United Kingdom</option>
        <option value="CA">Canada</option>
        <option value="AU">Australia</option>
    </select>
    <br /><br />
    <div id="divResult"></div>
</body>
</html>

How to get all selected options from multi-select dropdown in jquery : We want to get all the selected options text and value.
jquery get multiple selected option value

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#selectCountries').change(function () {
                var selectedOptions = $('#selectCountries option:selected');
                if (selectedOptions.length > 0) {
                    var resultString = '';
                    selectedOptions.each(function () {
                        resultString += 'Value = ' + $(this).val() +
                            ', Text = ' + $(this).text() + '<br/>';
                    });
                    $('#divResult').html(resultString);
                }
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <select id="selectCountries" multiple="multiple">
        <option selected="selected" value="USA">United States</option>
        <option value="IND">India</option>
        <option value="UK">United Kingdom</option>
        <option value="CA">Canada</option>
        <option value="AU">Australia</option>
    </select>
    <br /><br />
    <div id="divResult"></div>
</body>
</html>

Please note : Hold down the CTRL key, to select more than one item.

jQuery tutorial for beginners

1 comment:

  1. Many many thanks, for your helpful all tutorial . how are you, sir ? Sir multiple selectors do not work.When I clicked any option then change and Replaced text.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.