Reading Time: 3 minutes

10,035 Views

Inside this article we will see the concept of getting select option attribute value using jquery. There is super easy step to get the selected value from HTML select dropdown.

When you work with Select Option HTML Dropdown, usually you will be able to get the option value nor it’s attribute value. But using the concept of jquery you can get those values as well.

This tutorial will help you to understand the idea about how to get select option attribute value in jquery. We will see how to get data-id from select option.

Learn More –

Let’s get started.

Create an Application

Create a folder with name select-option. Create a file index.html into it.

Open index.html and write this complete code into it.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>How To Get Select Option Attribute Value in jQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <div class="container">
        <h4>How To Get Select Option Attribute Value in jQuery</h4>
        <div class="panel panel-primary">
            <div class="panel-heading">How To Get Select Option Attribute Value in jQuery</div>
            <div class="panel-body">
                <select name="dd_select" class="form-control" id="dd_select">
                    <option value="">Select Option</option>
                    <option value="value-1" data-id="1">Value 1</option>
                    <option value="value-2" data-id="2">Value 2</option>
                    <option value="value-3" data-id="3">Value 3</option>
                </select>
                <h4>Value: <span id="txtvalue"></span></h4>
            </div>
        </div>
    </div>

    <script>
        $(function() {
            $("#dd_select").on("change", function() {
                var option_attribute = $('option:selected', this).attr('data-id');
                $("#txtvalue").text(option_attribute);
            });
        });

    </script>

</body>

</html>

Application Testing

Open browser and type this –

URL – http://localhost/select-option/index.html

We hope this article helped you to learn How To Get Select Option Attribute Value in jQuery Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.