jQuery.simpleselect demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-simpleselect

by pioul

HTML

<script src="https://raw.github.com/pioul/jQuery.SimpleSelect/master/jquery.simpleselect.min.js"></script>
<div class="select-container" style="left: 100px;">
    <p>Regular select</p>
    <select id="the_select" name="the_select">
        <option>Option 1</option>
        <option selected="selected">Option 2 (pre-selected)</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

<div class="select-container" style="left: 400px;">
    <p>Select with optgroups</p>
    <select>
        <optgroup>
            <option>Option 1.1</option>
        </optgroup> 
        <optgroup>
            <option>Option 2.1</option>
            <option>Option 2.2</option>
        </optgroup>
        <optgroup>
            <option>Option 3.1</option>
            <option>Option 3.2</option>
            <option>Option 3.3</option>
        </optgroup>
    </select>
</div>

<div class="select-container" style="left: 700px;">
    <p>Select with optgroups and optgroup labels</p>
    <select>
        <optgroup label="Group 1">
            <option>Option 1.1</option>
        </optgroup> 
        <optgroup label="Group 2">
            <option>Option 2.1</option>
            <option>Option 2.2</option>
        </optgroup>
        <optgroup label="Group 3">
            <option>Option 3.1</option>
            <option>Option 3.2</option>
            <option>Option 3.3</option>
        </optgroup>
    </select>
</div>

CSS

body{
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    background-color: #fff;
}

.select-container {
    position: absolute;
    top: 200px;
}

.hidden_select_container {
	width: 0;
	height: 0;
	overflow: hidden;
}

.simpleselect {
	position: relative;
	color: #333;
}

.simpleselect,
.simpleselect .options {
	width: 200px;
}

/* compensation for the border */
.simpleselect .options {
	width: 198px;
}

.simpleselect,
.simpleselect .placeholder,
.simpleselect .options .option {
    height: 40px;
    line-height: 40px;
}

.simpleselect .placeholder,
.simpleselect .options .option,
.simpleselect .options .optgroup .optgroup-label {
	padding: 0 10px;
	cursor: pointer;
}


.simpleselect .options .optgroup .optgroup-label {
	cursor: default;
	font-weight: bold;
}

.simpleselect .options .optgroup .option,
.simpleselect.has-optgroup .placeholder {
	padding: 0 20px;
}

.simpleselect .placeholder,
.simpleselect .options {
	background: #e3e3e3;
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
	-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
	box-shadow: inset 0 0 1px 1px #f6f6f6;
}

.simpleselect .options {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

.simpleselect .options .option,
.simpleselect .options .optgroup,
.simpleselect .options .optgroup .optgroup-label {
	border-bottom: 1px solid #bbb;
}

.simpleselect .options .option {
	-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
	-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
	box-shadow: inset 0 0 1px 1px #f6f6f6;
}

.simpleselect .placeholder:hover,
.simpleselect.active .placeholder,
.simpleselect .options .option.active {
	background: #d9d9d9;
}

.simpleselect.disabled .placeholder,
.simpleselect.disabled .placeholder:hover {
	background: #f3f3f3;
	color:...

JavaScript

$("select")
    .simpleselect()
    .bind("change.simpleselect", function(){
        console.log('change; new value='+ $(this).val());
    });