Главная
Направление
Учебные задания
Новости
Статьи
Мой сайт
<div id="work2"><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="work2.1"> <form action="#"> <div id="circle" style="width: 250px; height: 250px; background: yellow;"></div> <fieldset> <label for="radius-button">Circle radius</label> <select name="radius" id="radius" style="display: none;"> <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> <label for="color-button">Circle color</label> <select name="color" id="color" style="display: none;"> <option value="black">Black</option> <option value="red">Red</option> <option value="yellow" selected="selected">Yellow</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> </fieldset> </form> </div> </div>
$(document).ready(function() { var circle = $("#circle"); $("#radius").selectmenu({ change: function(event, ui) { circle.css({ width: ui.item.value + "px", height: ui.item.value + "px" }); } }); $("#color").selectmenu({ change: function(event, ui) { circle.css("background-color", ui.item.value); } }); });
fieldset { border: 0; margin-left: 300px; } label { display: block; margin: 20px 0 0 0; } #circle { float: left; background: yellow; border-radius: 50%; width: 150px; height: 150px; }
Results:
Circle radius
50px
100px
150px
200px
250px
Circle color
Black
Red
Yellow
Blue
Green