CODEWITHSUNDEEP
htmlformszurb-foundation
Paul
Paul

Reputation: 359

Foundation 4 Custom Dropdown menu not binding data

I've implemented a Foundation 4 Dropdown within a form I am using.

The custom drop down menu is not binding to the corresponding value of the item I am clicking on.

In a list of 4 tags the first item will be selected correctly but all others will bind to the item before it...

Binds to option 1 - <li class="">Mr</li>
Binds to option 1 - <li class="">Mrs</li>
Binds to option 2 - <li class="">Miss</li>
Binds to option 3 <li class="">Ms</li>

1 - <option value="Mr">Mr</option>
2 - <option value="Mrs">Mrs</option>
3 - <option value="Miss">Miss</option>
4 - <option value="Ms">Ms</option>

Strangely when you click or select for the second time it binds to the correct item.

I've replicated several tests with similar results.

Has anyone come across anything similar?

Upvotes: 0

Views: 368

Answers (1)

Mike M.
Mike M.

Reputation: 125

If you're truly using a Zurb Foundation drop down element, then it would be wise to use Zurb's syntax for creating a drop down menu. Generally, this is the syntax that should be used for a DropDown Button:

<a href="#" data-dropdown="drop" class="button dropdown">Dropdown Button</a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
  <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>

OR for a basic DropDown control:

<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>
<a href="#" data-dropdown="drop2">Has Content Dropdown</a>
<div id="drop2" data-dropdown-content class="f-dropdown content">
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>

More documentation can be found on Zurb's Foundation website: http://foundation.zurb.com/docs/components/dropdown_buttons.html http://foundation.zurb.com/docs/components/dropdown.html

If I have not answered your question or perhaps misunderstood your question, or you believe this is a bug in one of the Foundation libraries, I also recommend upgrading to Foundation5 (which is the latest version, released fairly recently).

I hope this helps a little bit. Let me know if I've misunderstood or can help further.

-Mike

Upvotes: 0

Related Questions