Question

我正在使用插件（FacetWP）和高级自定义字段向我的网站添加搜索过滤器。有一个范围列表功能，它将数据设置为一个范围为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＆gt; = 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>')
});

Answer 2

来自jquery网站

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

例如，如果你的html是

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

您可以获得以下角色

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

因此，您的示例是完整的工作代码：

＆＃13;

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)

＆＃13;

<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>

＆＃13;

将Div转换为下拉列表（带数据值）

2 个答案: