Select

Single Choice
Multiple Choice

Single Choice

Single select controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <select> tag, and classes should follow on from the surrounding <div>.

Style	Attribute	Value	Standard Example	Inline Example

Standard			Text:	Text:
Disabled	class disabled	disabled disabled	Text:	Text:
Invalid	class	invalid	Text:	Text:

        
          <div class="form-group">
          <label for="<!-- Select control ID goes here -->"><!-- Label text goes here -->:</label>
          <select class="form-control selectpicker" id="<!-- Select control ID goes here -->" name="<!-- Select control name goes here -->">
          <option value="">Please select one</option>
          <option value="<!-- Option value goes here -->"><!-- Option label goes here --></option>
          <option selected="selected" value="<!-- Input control ID goes here -->"><!-- Input control ID goes here --></option>
          </select>
          </div>

Multiple Choice

Multiple choice controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <select> tag, and classes should follow on from the surrounding <div>.

Style	Attribute	Value	Standard Example	Inline Example

Standard			Text:	Text:
Disabled	class disabled	disabled disabled	Text:	Text:
Invalid	class	invalid	Text:	Text:

        
          <div class="form-group">
          <label for="<!-- Select control ID goes here -->"><!-- Label text goes here -->:</label>
          <select multiple="multiple" class="form-control selectpicker" id="<!-- Select control ID goes here -->" name="<!-- Select control name goes here -->">
          <option value="">Please select one</option>
          <option value="<!-- Option value goes here -->"><!-- Option label goes here --></option>
          <option selected="selected" value="<!-- Input control ID goes here -->"><!-- Input control ID goes here --></option>
          </select>
          </div>

Advanced Dropdown Select

Example:

Advanced Dropdown Select:

Code:


          <div class="form-group advanced-select">
            <label class="control-label" for="advancedDropdown">Advanced Dropdown Select:</label>
            <div class="control-input">
              <select name="" id="advancedDropdown" class="selectpicker" data-live-search="true" dropup-auto="false">
                <option value="Purchase Clerk">Purchase Clerk</option>
                <option value="Sales Clerk">Sales Clerk</option>
                <option value="Cash Book Clerk">Cash Book Clerk</option>
                <option value="Purchase Clerk Info">Purchase Clerk Info</option>
                <option value="Sales Clerk Info">Sales Clerk Info</option>
                <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
                <option value="Info Cash Two">Info Cash Two</option>
              </select>
            </div>
          </div>