How to add data-dropdown=“drop1” in a menu

Question

I am working to implement a drop-down menu from zurb foundation in Joomla CMS.

However, I am having trouble adding data-dropdown="drop1" because I don't know the right way to insert it.

What's the best way to insert it in a anchor?

Here's the page of the example I'm talking about: http://foundation.zurb.com/docs/components/dropdown.html

Here's the example I'm referring from the page above:

    <a href="#" data-dropdown="drop1">Has Dropdown</a>
      <ul id="drop1" class="f-dropdown" data-dropdown-content>
        <li><a href="#">This is a link</a></li>
        <li><a href="#">This is another</a></li>
        <li><a href="#">Yet another</a></li>
      </ul>

I've tried:

$( ".programs" ).append( $( 'data-dropdown="drop1"' ) );

$( ".programs" ).wrap( 'data-dropdown="drop1"' );

Also, to clarify when I do either one, it doesn't show up in source code

Clearly, jQuery is not my strongest forte.

What's the proper and right way via jQuery to add it?

Let me know if my question is not clear.

Any help would be appreciated as I've been tearing my hair out ... a lot.

EDIT

             <!-- Navigation -->
               <ul class="nav menu">
                 <li class="item-101 current active">
                       <a href="/social/services/" >Home</a>
                 </li>
                 <li class="item-106 deeper parent">
                       <a class="programs" href="/social/services/index.php/programs-services" >Programs &amp; Services</a>
                      <ul class="nav-child unstyled small">
                          <li class="item-107">
                            <a href="/social/services/index.php/programs-services/child-services-link-example" >Child Services Link Example</a>
                         </li>
                     </ul>
                </li>
             <li class="item-108">
                <a href="/social/services/index.php/featured-articles-news" >Featured Articles &amp; News</a>
           </li>
            <li class="item-109">
                <a href="/social/services/index.php/resources" >Resources</a></li>
            <li class="item-110"><a href="/social/services/index.php/donate" >Donate</a></li>
           <li class="item-111"><a href="/social/services/index.php/contact-us" >Contact Us</a></li></ul>

  <!-- End Navigation -->

Answer 1

You can set/get the data attribute using .data() (+info)

Get:

$('.selector').data('dropdown');

Set:

$('.selector').data('dropdown','value');

So in this case, if I understood right (maybe selector is .programs ul):

$( ".programs" ).data( 'dropdown','drop1' );

-EDIT-

It looks like you should edit the actuall html code (because maybe you set it after the dropdown script is initialised), but you can try this:

$('.f-dropdown').prev('a').data( 'dropdown','drop1' );