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


By admin-powenko

Dr. Powen Ko is a teacher and CEO on LoopTek LLC, and like to teaching. if you need to class, please let PowenKo know, he will love to service and sharing. LoopTek web site is www.looptek.com

Leave a Reply