Creating a multiple-selection list

Chosen can be used to create beautiful-looking multiple selections. In this recipe, we will create a form for a menu ordering that uses this type of selections in a form.

Creating a multiple-selection list

Getting ready

This recipe will contain the same parts as Creating a custom single-selection list, and build upon them.

How to do it...

We start by having the same base as Creating a custom single-selection list, and add the following parts:

  1. First, we add the selections that will have the drop-down CSS class we created in the head section:
                    <div>
      <label for="cocktails">Place the order for cocktails</label>
     <select id="cocktails" data-placeholder="Add cocktails"  multiple class="drop-down" name="cocktails">
          <option value=""></option>
          <option>Black Velvet</option>
          <option>Moonwalk</option>
          <option>Irish coffee</option>
          <option>Giant Panda</option>
          <option selected>Jungle Juice</option>
          <option selected>Mojito</option>
          <option selected disabled>Joker</option>
          <option disabled>Long Island Iced Tea</option>
          <option disabled>Kamikaze</option>
     </select>
    </div>
  2. We can also use grouping of the options for the select element having sections, such as Starters and Pizza:
    <div>
      <label for="food">Select the food order</label>
     <select id="food" data-placeholder="Select some off the menu element" multiple class="drop-down" name="food">
      <optgroup label="Starters">
            <option>White Pizza</option>
            <option>Calzone</option>
        <optgroup>
       <optgroup label="Pizza">
            <option>Chees and Tomato</option>
            <option>Garden Veggie</option>
            <option>Pepperoni</option>
        <optgroup>
        <optgroup label="Salads">
          <option>House Salad</option>
          <option>Cezar Salad</option>
          <option>Sopska</option>
        </optgroup>
     </select>
    </div>
  3. Simply select all elements that have the drop-down CSS class and enable Chosen for them:
      <script type="text/javascript">
   $(function() {
    $('.drop-down').chosen();
    }
   </script>

How it works...

Painless setup is one of the main features for Chosen so the JavaScript part is fairly simple because we only have a basic selection of elements. Options can be selected before the page is rendered to the user by having the selected attribute on options, such as Mojito. They can also be disabled from selection by using the disabled attribute, so in our case, the option Long Island Iced Tea will not appear in the selection.

Optgroups, selected states, multiple attributes, as well as other attributes are respected just like the standard HTML5 behavior. This means that we are not required to expect something special or do some customization on the server side handling for the forms.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.72.74