<?php require_once '../lib/Kendo/Autoload.php'; ?> <div id="cap-view" class="demo-section k-content"> <h4>Customize your Kendo Cap</h4> <div id="cap" class="black-cap"></div> <h4>Cap Color</h4> <?php $color = new \Kendo\UI\DropDownList('color'); $color->value(1) ->change('onChange') ->dataTextField('text') ->dataValueField('value') ->dataSource(array( array('text' => 'Black', 'value' => 1), array('text' => 'Orange', 'value' => 2), array('text' => 'Grey', 'value' => 3) )) ->attr('style', 'width: 100%'); echo $color->render(); ?> <h4 style="margin-top: 2em;">Cap Size</h4> <?php $size = new \Kendo\UI\DropDownList('size'); $size->index(0) ->dataSource(array('S - 6 3/4"', 'M - 7 1/4"', 'L - 7 1/8"', 'XL - 7 5/8"')) ->attr('style', 'width: 100%'); echo $size->render(); ?> <button class="k-button k-primary" id="get" style="margin-top: 2em; float: right;">Customize</button> </div> <script> function onChange() { var value = $("#color").val(); $("#cap") .toggleClass("black-cap", value == 1) .toggleClass("orange-cap", value == 2) .toggleClass("grey-cap", value == 3); }; $(document).ready(function() { var color = $("#color").data("kendoDropDownList"); var size = $("#size").data("kendoDropDownList"); $("#get").click(function() { alert('Thank you! Your Choice is:\n\nColor ID: '+color.value()+' and Size: '+size.value()); }); }); </script> <style> #cap { width: 242px; height: 225px; margin: 20px auto; background-image: url('../content/web/dropdownlist/cap.png'); background-repeat: no-repeat; background-color: transparent; } .black-cap { background-position: 0 0; } .grey-cap { background-position: 0 -225px; } .orange-cap { background-position: 0 -450px; } </style>