將 div 轉換為下拉列表（使用數據值）

Question

我正在使用插件 (FacetWP) 和高級自定義字段向我的網站添加搜索過濾器。 有一個范圍列表 function 其中 styles 數據作為無線電列表，范圍為 1-4、4-5 等。我需要像下拉列表 Z99938282F04071859941E18FZEF 一樣設置它的樣式。 我通過使用以下編碼實現了這一點：

 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 >= 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 的數據 object。

例如，如果您的 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>