滑块(Slider) - 绑定到 select 的滑块
如何绑定一个滑块到一个已有的 select 元素。选择保持可见以便显示变化。当选择改变时,同时更新滑块。
源代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 滑块(Slider) - 绑定到 select 的滑块</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { var select = $( "#minbeds" ); var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", value: select[ 0 ].selectedIndex + 1, slide: function( event, ui ) { select[ 0 ].selectedIndex = ui.value - 1; } }); $( "#minbeds" ).change(function() { slider.slider( "value", this.selectedIndex + 1 ); }); }); </script> </head> <body> <form id="reservation"> <label for="minbeds">最小的床位数</label> <select name="minbeds" id="minbeds"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </form> </body> </html>