自定义jQuery -向<select><option>添加数据筛选器

Question

我需要修改一个定制的jQuery脚本。

--我有一个定制的jQuery脚本，它执行以下操作：

• 它将标准的HTML无序列表转换为<select>下拉列表。
• 它将列表项转换为可单击的<options>。
• <select>隐藏在桌面上，仅显示在手机上。
• 所有这些都很好，下面是截图：

​

一切都运行良好，但是我需要向每个<option>添加一个附加属性。

• 注意每个HTML列表项是如何具有的(data-filter=“..term x”)
• 我还需要将它添加到每个<option>中的<select>下拉列表中。

--这是脚本运行和完成后页面上的最终HTML输出的样子：

<div id="horizontal_nav">
<ul class="sub-menu">
    <li><a href="http://localhost.local/site/horizontal-nav/" data-filter=".term-3"><span><strong>Horizontal Nav</strong></span></a></li>
    <li><a href="http://localhost.local/site/full-width/" data-filter=".term-4"><span><strong>Full Width</strong></span></a></li>
    <li><a href="http://localhost.local/site/blog/" data-filter=".term-3"><span><strong>Blog</strong></span></a></li>
    <li><a href="http://localhost.local/site/cart/" data-filter=".term-4"><span><strong>Cart</strong></span></a></li>
    <li><a href="http://localhost.local/site/checkout/" data-filter=".term-5"><span><strong>Checkout</strong></span></a></li>
    <li><a href="http://localhost.local/site/features/" data-filter=".term-5"><span><strong>Features</strong></span></a></li>
</ul>
<select>
    <option selected="selected" value="">More in this section...</option>
    <option value="http://localhost.local/site/horizontal-nav/">Horizontal Nav</option>
    <option value="http://localhost.local/site/full-width/">Full Width</option>
    <option value="http://localhost.local/site/blog/">Blog</option>
    <option value="http://localhost.local/site/cart/">Cart</option>
    <option value="http://localhost.local/site/checkout/">Checkout</option>
    <option value="http://localhost.local/site/features/">Features</option>
</select>
</div>

这里是创建<select> 的jQuery，需要进行上面提到的修改

    jQuery(document).ready(function () {

    jQuery("<select />").appendTo("#horizontal_nav");
    jQuery("<option />", {
        "selected": "selected",
        "value": "",
        "text": php_data.mobile_sub_menu_text
    }).appendTo("#horizontal_nav select");
    jQuery("#horizontal_nav a").each(function() {
        var el = jQuery(this);
        jQuery("<option />", {
            "value": el.attr("href"),
            "text": el.text()
        }).appendTo("#horizontal_nav select")
    });
    jQuery("#horizontal_nav select").change(function() {
        window.location = jQuery(this).find("option:selected").val()
    })
};

});

Answer 1

​

jQuery(document).ready(function() {

  jQuery("<select />").appendTo("#horizontal_nav");
  jQuery("<option />", {
    "selected": "selected",
    "value": ""
  }).appendTo("#horizontal_nav select");
  jQuery("#horizontal_nav a").each(function() {
    var el = jQuery(this);
    jQuery("<option />", {
      "value": el.attr("href"),
      "text": el.text(),
      "data-filter": el.attr('data-filter')//add it here
    }).appendTo("#horizontal_nav select")
  });
  jQuery("#horizontal_nav select").change(function() {
    window.location = jQuery(this).find("option:selected").val()
  })


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="horizontal_nav">
  <ul class="sub-menu">
    <li><a href="http://localhost.local/site/horizontal-nav/" data-filter=".term-3"><span><strong>Horizontal Nav</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/full-width/" data-filter=".term-4"><span><strong>Full Width</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/blog/" data-filter=".term-3"><span><strong>Blog</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/cart/" data-filter=".term-4"><span><strong>Cart</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/checkout/" data-filter=".term-5"><span><strong>Checkout</strong></span></a>
    </li>
    <li><a href="http://localhost.local/site/features/" data-filter=".term-5"><span><strong>Features</strong></span></a>
    </li>
  </ul>
</div>

​

添加一个.attr()名称，它是data-filter，然后从ul添加数据筛选器。