scorey25 scorey25 - 6 months ago 18
jQuery Question

Custom jQuery - add data-filter to <select><option>

I'm in need of your expert assistance to make a modification to a custom jQuery script.

I've got a custom jQuery script which does the following:


  • it converts a standard HTML un-ordered list into a
    <select>
    dropdown

  • it converts the list-items to clickable
    <options>

  • the
    <select>
    is hidden on desktop and only shown on mobile

  • all of this works great and here's a screenshot: enter image description here






All is working well, however I need an additional attribute to be added to each
<option>



  • Notice how each HTML list item has (data-filter=".term-x")

  • I need this to also be added to each
    <option>
    in the
    <select>
    dropdown






Here's what the final HTML output looks like on the page after script has run and done it's thing:

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




Here's the jQuery that creates the and needs the modification mentioned above

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

});


This jQuery novice thanks you very much for your guidance on this.

Cheers :)

Answer

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>

add an .attr() name it data-filter then append the data-filter from the ul

Comments