Essence of UI Development

http://uidevelopmentiseasy.wordpress.com/ ---------------------------------------- Dynamically set dropdown value using jquery

by palash

HTML

<h2>Dynamically set dropdown value using jquery</h2>
<br/>
<span>Please click on the checkbox.</span>
<br/><br/>
<span class="boldSpan">Select a Car:  </span>
<select id="cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<br/><br/>
<span class="boldSpan">Is Mercedes?  </span>
<input type="checkbox" class="mercedes" checked />

CSS

body {
    font: 11px/18px'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #333;
}
h2 {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.boldSpan{
    color: #333;
    font-weight:bold;
}
span{
    color: #666;
}

JavaScript

//  Bind an event handler to the "change" JavaScript event
$('.mercedes').change(function () {
    $('#cars').val(this.checked ? 'mercedes' : 'audi');
});