如何使用 jquery 更改 DIV 中数据顶部和数据范围的值

Question

大家好，有谁知道如何使用 select 选项在 jQuery 中更改 data-top 和 data-range 的属性值

我想要发生的是当我选择其中一个选项时，即cap、vol 和 cat，div 中 data-order="cap" 的值将使用 jQuery 进行更改

这里是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>

这里是选择框的代码

<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 代码：

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

这是供参考的图片，选择框有 3 个选项 cat,vol 所以当我选择这三个中的任何一个时，下面的硬币都会改变 enter image description here

Answer 1

a) 给其他 2 个选择框一些 id（比如说 topby 和 periodby），

b) 之后添加如下代码：

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);
    });
});