Tuesday, July 21, 2015

Get multiple dropdown value using JQuery

Here is how my HTML looks
 Here is the HTML and JS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#selectedCountries").change(function () {
                var selectedOption = $("#selectedCountries option:selected");
                if (selectedOption.length > 0) {
                    var resultString = '';

                    selectedOption.each(function () {
                        resultString += "Value =" + $(this).val() + ", Text=" + $(this).text() + "<br/>";

                    });

                    $(divResults).html(resultString);

                }


            });
        });
    </script>
</head>

<body>
    Country :
    <select id="selectedCountries" multiple="multiple">
        <option value="USA">United States</option>
        <option value="India">India</option>
        <option value="UK">United Kingdom</option>
        <option value="CA">Canada</option>
        <option value="AU">Australia</option>
    </select>

    <br />
    <br />

    <div id="divResults">
    </div>

</body>

</html>


Results : You can select control and options in dropdown, it will show values for selected dropdown items




See Demo here : https://jsfiddle.net/2dmg861f/1/

No comments:

Post a Comment