How to change value of data-top and data-range in DIV using jquery

user_10765077 0
Viewed 57

Hi there guys is anyone knows how to change the attribute value of data-top and data-range in jQuery using the select option

what I want to happen is when I select on one of the option i.e. cap, vol, and cat the value of data-order="cap" in div will be changed using jQuery

here is the code of div

<div id="heatmap" class="cr-heatmap-widget" data-top="10" data-range="24H" data-order="cat" style="width: 370px; height: 250px;">
    <a target="_blank" rel="noopener" href="https://cryptorank.io/heatmaps">
        Market State by Cryptorank
    </a>
</div>
<script src="https://cryptorank.io/widget/market-state.js"></script>

Here is the code for select-box

<div class="select-dropdown">
    <select id="showby">
        <option value="cap">Market Cap</option>
        <option value="vol">Volume</option>
        <option value="cat">Category</option>
    </select>
</div>

jQuery code:

jQuery(document).ready(function(){
    jQuery("#showby").change(function(){
        var selectedCountry = jQuery(this).children("option:selected").val();
        jQuery('#heatmap').attr('data-order',selectedCountry)
    });
});

Here's the image for reference the select box has 3 option cat,vol so when I select any of the three the coins below will be change enter image description here

wordpress html php jquery
1 Answers

a) Give other 2 select-boxes some id (lets say topby and periodby),

b) After that add code like below:

jQuery(document).ready(function(){
   jQuery("#showby").change(function(){
       var selectedCountry = jQuery(this).val();
       jQuery('#heatmap').attr('data-order',selectedCountry);
   });
   jQuery("#topby").change(function(){
        var topBy = jQuery(this).val();
        jQuery('#heatmap').attr('data-top',topBy);
    });
    
    jQuery("#periodby").change(function(){
        var periodBy = jQuery(this).val();
        jQuery('#heatmap').attr('data-range',periodBy);
    });
});
user_42483280
Related