jQuery Selectbox plugin

Custom select box replacement inspired by jQuery UI source. Require jQuery 1.4.x or higher

new version 0.2 available

Demo

Loading ...
ZinoUI - jQuery user interface

Options

Property Type Default
classHolder String 'sbHolder'
classHolderDisabled String 'sbHolderDisabled'
classSelector String 'sbSelector'
classOptions String 'sbOptions'
classDisabled String 'sbDisabled'
classFocus String 'sbFocus'
classGroup String 'sbGroup'
classSub String 'sbSub'
classToggleOpen String 'sbToggleOpen'
classToggle String 'sbToggle'
effect String 'slide'
speed Number 200

Events

Event Description
onOpen function(inst) Allows you to define your own event when the selectbox is opened. The function receives the selectbox instance as parameter.
onChange function(value, inst) Allows you to define your own event when the selectbox is changed. The function receives the selected option value and the selectbox instance as parameters.
onClose function(inst) Allows you to define your own event when the selectbox is closed, whether or not a option is selected. The function receives the selectbox instance as parameter.

Methods

Method Description
attach .selectbox("attach") Attach the select box to a jQuery selection. This will hide the element and create its custom replacement.
change .selectbox("change") Change selected attribute of the selectbox.
close .selectbox("close") Close opened selectbox.
detach .selectbox("detach") Remove the selectbox functionality completely. This will return the element back to its pre-init state.
disable .selectbox("disable") Disable the selectbox.
enable .selectbox("enable") Enable the selectbox.
open .selectbox("open") Call up attached selectbox.
option .selectbox("option", options) Get or set any selectbox option. If no value is specified, will act as a getter.

Example

$("#country_id").selectbox({
	onOpen: function (inst) {
		//console.log("open", inst);
	},
	onClose: function (inst) {
		//console.log("close", inst);
	},
	onChange: function (val, inst) {
		$.ajax({
			type: "GET",
			data: {country_id: val},
			url: "ajax.php",
			success: function (data) {
				$("#boxCity").html(data);
				$("#city_id").selectbox();
			}
		});
	},
	effect: "slide"
});
$(".nova").selectbox({
	effect: "fade"
});
$("#vehicle_id").selectbox({
	speed: 400
});