将 div 转换为下拉列表（使用数据值）

Question

我正在使用插件 (FacetWP) 和高级自定义字段向我的网站添加搜索过滤器。有一个 Range List 函数可以将数据设置为具有 1-4、4-5 等范围的单选列表。不过，我需要将其设置为下拉选择。我通过使用以下编码实现了这一点：

var sel = $('<select class="facetwp-dropdown" id="new_facet"/>');
$('#new_facet div').each(function(){
    sel.append('<option value='+this.dataset.value+'>'+this.innerHTML+'</option>')
})
        
$('#new_facet').replaceWith(sel)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_facet" class="facetwp-facet facetwp-facet-new_facet facetwp-type-range_list" data-name="new_facet" data-type="range_list">
        <div class="facetwp-radio" data-value="1-10">1+</div>
        <div class="facetwp-radio" data-value="2-10">2+</div>
        <div class="facetwp-radio" data-value="3-10">3+</div>
        <div class="facetwp-radio" data-value="4-10">4+</div>
        </div>

但是，我不知道如何在下拉列表中使用数据值。如您所见，我已将它添加到我的 Javascript 中，但它实际上并没有收集任何数据。有什么帮助吗？谢谢！

Answer 1

来自 jquery 网站

从 jQuery 1.4.3 开始，HTML 5 数据属性将自动 拉入到 jQuery 的数据对象中。

例如，如果您的 html 是

<div id="myDiv" data-role="page"></div>

你可以得到如下角色

$( "#myDiv" ).data( "role" )

因此，对于您的示例，这里是完整的工作代码：

var sel = $('<select class="facetwp-dropdown" id="new_facet"/>');
$('#new_facet div').each(function(){
  console.log("data-value: "+$(this).data('value'));
  sel.append('<option value='+$(this).data('value')+'>'+$(this).html()+'</option>');
});
        
$('#new_facet').replaceWith(sel)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_facet" class="facetwp-facet facetwp-facet-new_facet facetwp-type-range_list" data-name="new_facet" data-type="range_list">
    <div class="facetwp-radio" data-value="1-10">1+</div>
    <div class="facetwp-radio" data-value="2-10">2+</div>
    <div class="facetwp-radio" data-value="3-10">3+</div>
    <div class="facetwp-radio" data-value="4-10">4+</div>
</div>

Answer 2

您以错误的方式收集数据属性。

试试这个

jQuery >= 1.4.3

$('#new_facet div').each(function(i,e){
  sel.append('<option value='+$(e).data('value')+'>'+$(e).html()+'</option>')
});

或

$('#new_facet div').each(function(i,e){
  sel.append('<option value='+$(e).attr("data-value")+'>'+$(e).html()+'</option>')
});