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.

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 :

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.   How To Convert XML To Associative Array in PHP
  2.   Monetized Videos not showing ads in youtube 2019 - Google Adsens
  3.   Laravel Vue JS ajax file upload multipart form data
  4.   Automatically Activate WordPress Plugins programmatically
  5.   JavaScript GROUP BY Function with Example
  6.   Laravel controller Get csrf tokens in ajax calls
  7.   Remove Html tags from string PHP - PHP strip_tags() Function
  8.   Simple Controllers using Angular Example
  9.   WordPress Plugin Redirect After Activation
  10.   Ng-Template using Angular Example