案例:jQuery UI案例     状态:可编辑再运行    进入横版
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 滑块(Slider) - 绑定到 select 的滑块</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <script>
11
  $(function() {
12
    var select = $( "#minbeds" );
13
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
14
      min: 1,
15
      max: 6,
16
      range: "min",
17
      value: select[ 0 ].selectedIndex + 1,
18
      slide: function( event, ui ) {
19
        select[ 0 ].selectedIndex = ui.value - 1;
20
      }
21
    });
22
    $( "#minbeds" ).change(function() {
23
      slider.slider( "value", this.selectedIndex + 1 );
24
    });

 运行结果 
 北美留学生论坛