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.

  Laravel Autocomplete Live Search from database

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 :

  8 Useful PHP Tips Tricks and Best Practices

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.

Leave a Reply

avatar
  Subscribe  
Notify of