How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Select

Zero-UI's select is a replacement of the browser's default<select>. The original<select>or<input>will be hidden, and the selected value can be read from itsvalueproperty.


Initialize

You must initializeselectmanually.

	$('select').select();

Generate options from html

The first item will be automatically selected unless you added the attribute'selected'on an<option>.


	<!-- html -->
	<select id="select1">
		<option value="1">Apple</option>
		<option value="2">Orange</option>
		<option value="3" disabled>Banana</option>
		<option value="4">Grape</option>
	</select>
	// javascript
	$('#select1').select();

Generate options via javascript

When the options are generated via javascript, please use<input>as the trigger element.

This will not automatically select the first item.


	<!-- html -->
	<input type="text" id="select2">
	// javascript
	$('#select2').select({
		data: [
			{ value: 1, text: 'apple' },
			{ value: 2, text: 'orange' },
			{ value: 3, text: 'banana' },
			{ value: 4, text: 'tomato', disabled: true }
		]
	});

Grouping


	<!-- html -->
	<select id="select3">
		<optgroup label="Fruits">
			<option value="1">Apple</option>
			<option value="2">Orange</option>
			<option value="3">Grape</option>
		</optgroup>
		<optgroup label="Sports">
			<option value="4">Football</option>
			<option value="5">Swimming</option>
			<option value="6">Tennis</option>
		</optgroup>
	</select>
	// javascript
	$('#select3').select();

Grouping


	<!-- html -->
	<select id="select4">
	// javascript
	$('#select4').select({
		data: {
			'fruit': [
				{ value: 7, text: 'apple' },
				{ value: 8, text: 'orange' },
				{ value: 9, text: 'banana' }
			],
			'sport': [
				{ value: 9, text: 'football' },
				{ value: 10, text: 'swim' },
				{ value: 11, text: 'tennis' }
			]
		}
	});

Multiple


	<!-- html -->
	<input id="select5">
	// javascript
	$('#select5').select({
		multiple: true,
		data: [ ... ]
	});

Set initial value via javascript


     

	<!-- html -->
	<select id="select6">
	<select id="select7">
	<select id="select8">
	// javascript
	// Set initial value
	$('#select6').select({
		initialValue: 2,
		data: [
			{ value: 1, text: 'apple' },
			{ value: 2, text: 'orange' },
			{ value: 3, text: 'banana' },
			{ value: 4, text: 'tomato' }
		]
	});

	// Set initial value - the other way
	$('#select7').select({
		data: [
			{ value: 1, text: 'apple' },
			{ value: 2, text: 'orange' },
			{ value: 3, text: 'banana', selected: true },
			{ value: 4, text: 'tomato' }
		]
	});

	// Multiple - Set initial value
	$('#select8').select({
		multiple: true,
		data: [
			{ value: 1, text: 'apple', selected: true },
			{ value: 2, text: 'orange' },
			{ value: 3, text: 'banana', selected: true },
			{ value: 4, text: 'tomato' }
		]
	});

Disabled

Size

    
	<!-- html -->
	<select class="small">
		...
	</select>

	<select>
		...
	</select>
	
	<select class="large">
		...	
	</select>

Styles

     

  
	<!-- html -->
	<select class="light">
		...
	</select>

	<select class="gray">
		...
	</select>

	<select class="square">
		...	
	</select>
	
	<select class="round">
		...	
	</select>

	<select class="bold">
		...	
	</select>

Options

Name Type Default Desc
position String '' Direction of the options
multiple Boolean false Multiple or not
data Array/Object null Data for select's options
initialValue String '' Initial value
onChange Function function(value, text) {} Fires when an item is selected
param1: value - the selected item's value
param2: text - the selected item's text

API

Diable & Enable


   
	$('#select10').select('disable');  // Diable
	$('#select10').select('enable');  // Enable