How To Get Select Option Attribute Value in jQuery

Share this Article
Reading Time: 3 minutes
5,820 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.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshare free for 1 month! Learn CakePHP 4, Laravel APIs Development, CodeIgniter 4, Node Js, etc into a depth level. Master the Coding Skills to Become an Expert in Web Development. So, Search your favourite course and enroll now. Click here to join.

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.

Was this post helpful?

Learn Web Development Courses Risk Free @ $5 only.
Web Development Courses @ $5