<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
select {
width: 200px;
}
#circle {
float: left;
background: yellow;
border-radius: 50%;
width: 150px;
height: 150px;
}
</style>
<div id="circle"></div>
<form action="#">
<fieldset>
<label for="radius">Circle radius</label>
<select name="radius" id="radius">
<option value="50">50px</option>
<option value="100">100px</option>
<option value="150" selected="selected">150px</option>
<option value="200">200px</option>
<option value="250">250px</option>
</select>
</fieldset>
</form>
<script>
$(function() {
var circle = $( "#circle" );
$( "#radius" ).selectmenu({
change: function( event, data ) {
circle.css({
width: data.item.value,
height: data.item.value
});
}
});
});
</script>
Post navigation