将下拉菜单设为 jquery 滑块

Question

我有一些由 wordpress 插件创建的下拉菜单，我正在尝试将它们制作成滑块。

我在这里找到了这个页面 -- http://jqueryui.com/slider/#hotelrooms

我正在努力使代码适应我的需要 --

<script>
 jQuery(function($) {
    var select = $( ".comment-overall_r select" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
      min: 1,
      max: 5,
      range: "min",
      value: select[ 50 ].selectedIndex + 1,
      slide: function( event, ui ) {
        select[ 0 ].selectedIndex = ui.value - 1;
      }
    });
    $( ".comment-overall_r select" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
  </script>

没有任何反应，我不断收到有关 selectedIndex 的错误消息。 select 下拉菜单是由插件生成的，所以我不直接编辑它们。我该怎么做？

Answer 1

为什么要添加 value: select[ 50 ] 这样的配置。我认为配置应该是这样的：

 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;
  }
});

将下拉菜单设为 jquery 滑块

Make dropdown into jquery slider

javascript

jquery

jquery-ui

slider