Search code examples
javascriptjquery-uimustache

How to display Group name also along with dropdown list items using jquery multiselect in mustache

I'm using mustache.js for rendering my page. Here is the snippet of what I'm trying to do:

{{#items}}

  <optgroup label ="Countries">   

<option >

{{name}} // json data
</option> 
 </optgroup> 


{{/items}}

The items contain the json data and I'm trying to render it in a form of a table using the jquery multiselect plugin.

Here is the jquery widget that I'm using, I'm trying to add a label on top of the options, i.e 

Countries:
      Afghanistan
      Albania...and so on

Any ideas how can it be implemented? I tried using the "optgroup", howevevr it doesn't work. Maybe I'm not using it the right way. Any ideas appreciated!!!!

Thanks!

Solution

  • The optgroup should be out of the {{#items}}

    <select>
  <optgroup label ="Countries">   
{{#items}}
     <option>{{name}}</option> 
{{/items}}
 </optgroup>
</select>

    This will generate proper HTML.