change





     
 <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>



Leave a Reply