javascript select element by data attribute value

Today, We want to share with you javascript select element by data attribute value.In this post we will show you jquery find element with attribute name, hear for get data attribute of selected option jquery we will give you demo and example for implement.In this post, we will learn about Select element by data attribute in JavaScript with an example.

javascript select element by data attribute value

There are the Following The simple About How to select elements by data attribute using CSS? Full Information With Example and source code.

Read Also:  Ajax Image Upload using PHP and jQuery

As I will cover this Post with live Working example to develop html5 custom attributes without data prefix, so the How to select elements by custom HTML5 data attribute? is used for this example is following below.

Setting, getting, and removing data attributes Example

Example 1: document.querySelectorAll() in javascript

How to Find an Element Based on a Data-attribute Value in jQuery

<a product-id='122'>989898414141</a>

<script type="text/javascript">
	var product_data = document.querySelectorAll('[product-id]');
	var product_data = product_data[0].innerHTML;
	alert(product_data);
</script>

Example 2: jQuery Selecting Element by Data Attribute

<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Get & Set Data Attribute Value From Elements jQuery</title>
<style>
    ul li { 
        float: left;
        margin: 10px;
        list-style: none;
    }
    ul li img.selected{
        outline: 5px solid black;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        var product = $(this).children("option:selected").val();
        $(".products img").removeClass("selected");
        
        $('.products img[data-product=' + product + ']').addClass("selected");
    });    
});
</script>
</head>
<body>
<h2>Use the CSS Attribute Selector & jQuery Example</h2>
    <label>Preview Devices:</label>
    <select>
        <option>select Any option</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <hr>
    <ul class="products">
        <li>
            <img src="media/computer.jpg" alt="Computer" data-product="1">
        </li>
        <li>
            <img src="media/lcd.jpg" alt="LCD" data-product="2">
        </li>
        <li>
            <img src="media/laptop.jpg" alt="Laptop" data-product="3">
        </li>
        <li>
            <img src="media/mobile.jpg" alt="Mobile" data-product="4">
        </li>
    </ul>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  PHP Crop Resize Image while Uploading using jquery plugin

Summary

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

I hope you get an idea about get element by data attribute vanilla js.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Laravel Autocomplete search from Database Example
  2. Read Also:  jQuery Ajax File Upload images using PHP MySQLi
  3. Read Also:  How to get the browser viewport height and width dimensions?
  4. Read Also:  Insert Data Into Database using Vue.js with PHP Mysql
  5. Read Also:  Dynamically Change Page Title Keywords Meta Description In AngularJS
  6. Read Also:  jQuery Disable Button After Click Example
  7. Read Also:  Codeigniter File Download Helper - Download file from database - URL using Server
  8. Read Also:  How to split string to array by Comma using jquery?
  9. Read Also:  PHP Laravel Autocomplete search from Database Example
  10. Read Also:  Insert Data Into Database using Vue.js with PHP Mysql
CLOSEX