Develop Reference

jQuery merging values from data attributes and filtering content

I have this problem I can’t solve alone, and I need to ask for your help.
Basically I would like to have a two panels, the first one is like a main filter, while the other one is a some kind of modifier.
<section class="primary-panel">
<p>Primary panel</p>
<ul class="primary-panel-wrapper">
<li class="primary-panel-item" data-foo="A">foo A</li>
<li class="primary-panel-item" data-foo="B">foo B</li>
<li class="primary-panel-item" data-foo="C">foo C</li>
</ul>
</section>
<section class="secondary-panel">
<p>Secondary panel</p>
<ul class="secondary-panel-wrapper">
<li class="secondary-panel-item" data-bar="A">bar A</li>
<li class="secondary-panel-item" data-bar="B">bar B</li>
<li class="secondary-panel-item" data-bar="C">bar C</li>
</ul>
</section>
So when I choose “foo A/B or C” the script filter those items, and it’s quite ok.
But when I choose the “modifier” (bar A/B or C) I would like to merge those those attributes together and display modified version, so I could get something like this “foobar AA/AB/AC/BA/BB/BC/CA/CB/CC”.
So basically when I choose “foo A” and then “bar A/B/C” I would like to get “foobar AA/AB/AC”, same for “foo B” -> ”foobar BA/BB/BC” and “foo C” -> “foobar CA/CB/CC” and so on.
I kind of accomplished this, but I always get AA/AB/AC no matter what I chose earlier (foo A/B or C), and it’s killing me.
If you have any idea how it could be solved I would appreciate it if you help me with this.
Here you'll find full fiddle:
http://jsfiddle.net/c0drbs2u/33/
Thanks in advance.

Solution:
You had a very small mistake in your code :)
var foobar = $(".showcase-overview .item").attr('data-foo') + $e.attr('data-bar')
// Needed to be
const foobar = $(".primary-panel-item.active").attr('data-foo') + $e.attr('data-bar')
That's it!
Fiddle:
Here's the Fiddle with the fix: http://jsfiddle.net/c0drbs2u/47/

Is there any way to style <select> dropdown options container and items?

Im using contact form 7 on wordpress, i don't want to use a plugin rather use plain css/js to bring the results if possible.
Something like this :

All browser define select difrent from each other.
You can use UL and LI to make custom select like list.
Here is a example, this can help you to make all select look similiar on all browser and on mobile too.
And select would be something like:
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>

If you give you dropdown an id, then you can select the id using jQuery and use its children method. You can even specify which child.
Something like this:
$("dropdownId").children().css({"color": "yellow", "border": "1px solid red"});

Creating a fancy dropdown with varying number of options using angular and bootstrap

I have written the following code for a basic Angular dropdown which takes data from a controller. This creates a very basic dropdown and doesn't utilize Bootstrap styling. I am trying to combine Bootstrap and Angular, but I'm unable to figure out how will I combine the following:
Current code:
<ul class="nav nav-sidebar">
<li>
<p>
<select data-ng-model="s1" data-ng-options="x.col1 for x in data1" data-ng-change="updateData2()">
<option value="" disabled selected>Drop Down 1</option>
</select>
</p>
</li>
<li>
<p>
<select data-ng-model="s2" data-ng-options="x.col1 for x in data2" data-ng-change="updateData3()">
<option value="" disabled selected>Drop Down 1</option>
</select>
</p>
</li>
</ul>
What's necessary for Bootstrap:
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
The problem I'm facing is how to use ng-repeat or another directive, rather than adding <li> for every item under ul.

This is the thousand foot view of how I implemented this.
Create a JSON object that holds your list items values, attributes and such. You will also need a type property, item, header row, etc.. You will then run the created object through the ng-repeat. While doing the repeat set up a ngSwitch and watch type. Inside of the switch cases you will have a block of HTML that relates to the type it matches. This will let you create several different types of elements inside of the same repeat.
<ul ng-repeat='item in items'
ng-switch-on='item.type'>
<li ng-switch-when="type1" your desired attributes >
Inner HTML
</li>
<li ng-switch-when="type2" your desired attributes >
Inner HTML
</li>
<li ng-switch-when="type3" your desired attributes >
Inner HTML
</li>
</ul>

Display subcategories in HTML select box

I have the following categories displayed in a select box:
<form>
<select class="favoritefood">
<optgroup label="Dairy products">
<option>Cheese</option>
<option>Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option>Cabbage</option>
<option>Lettuce</option>
<option>Beans</option>
<option>Onions</option>
<option>Courgettes</option>
</optgroup>
</select>
</form>
Is there any way to go another level down, ie, a subcategory? I've tried using optgroup inside optgroup but it doesn't work.

Or just put one or more spaces - &nbsp - before your text in the option.

You should create a custom dropdown for this purpose. Here are the steps:
Hide the original dropdown with CSS (display:none;) OR create a hidden field that will contain the value selected by the user
<input type="hidden" name="selection" id="selection">
Create a unordered list (ul) with as many nested li and sub ul
<ul class="custom-drop">
<li class="option-group">
<ul>
<li class="heading">Vegetables</li>
<li>Cabbage</li>
</ul>
</li>
<li class="option-group">
<ul>
<li class="heading">Dairy products</li>
<li>Cheese</li>
</ul>
</li>
</ul>
Style this newly created ul as per your needs
Listen for the click event on li inside this ul and set the appropriate option inside the hidden dropdown OR set the value of hidden field so that it can be sent with the form.
So if you are using jQuery then do something like this:
$('body').on('click', '.custom-drop li', function() {
$('#selection').val($(this).text());
// Probably you want to handle showing/hiding the custom drop here
});

You cant go any deeper. It is not allowed for the optgroup.
Read this: http://www.w3.org/TR/html401/interact/forms.html#h-17.6

Slide multi-level menu and breadcrumbs in Angular

Does anyone know how I could modify the following code to make a sliding multi-level menu and breadcrumbs in Angular, like this facebook help page?
My basic html code is like this:
<ul>
<li>
Electronics
<ul>
<li>back</li>
<li>Phones</li>
</ul>
</li>
<li>
Furniture
<ul>
<li>back</li>
<li>
Living Room
<ul>
<li>back</li>
<li>Bookshelves</li>
</ul>
</li>
<li>Patio</li>
</ul>
</li>
</ul>

In regards to the sliding menu, there are a ton of solutions out there. Here are some links:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
http://blogs.sitepointstatic.com/examples/tech/css3-sliding-menu/index.html
To stay in the angular world you can switch out partials in different states or use something like ng-switch. There are really so many options it is difficult to give you a single answer.
In regards to the breadcrumbs, here are a few nice pre-built options:
jsc-breadcrumbs - a blog post with instructions
angular-breadcrumbs