Question

我指的是

http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support

并且很难在滑块上检索所选值。最初我有一个下拉列表，其中有一个与之关联的onchange事件。并且通过致电

来工作

 <select id="myselect" onchange="myfunction(this);" >

但现在要求已更改为滑块

 $('select#myselect').selectToUISlider({sliderOptions: {stop: function(e,ui) {alert(this.val());}}});

它抛出了this.val（）不是函数。

我也尝试使用

$('select#myselect').selectToUISlider({sliderOptions: {stop: function(e,ui) {alert(ui);}}});

但是使用ui参数也无法检索所选的值...它只返回选定的索引。

下拉列表看起来像这个

<select name="myselect" id="myselect">
            <option value="20">txt1</option>
            <option value="30">txt2</option>
            <option value="40" selected="selected">txt3</option>
            <option value="50">txt4</option>
            <option value="60">txt5</option>
        </select>

如果我能够触发选择框的onchange事件但看起来像使用滑块时，下拉列表的值会发生变化，但它不会触发事件，那将是非常好的。

非常感谢任何帮助！

由于

Answer 1

您所在的事件是UI滑块，而不是<select> ...但<select>值已经更新，所以只需获取它，如下所示：

$('#myselect').selectToUISlider({
  sliderOptions: {
    stop: function(e,ui) {
      var currentValue = $('#myselect').val();
    }
  }
});

Answer 2

我偶然发现了同样的问题，如果Slider OR Select Drop down在哪里更改，我需要获取新值，但是当我使用选择下拉菜单时'stop'选项不起作用。所以我只使用了一个函数的sliderOptions'change'选项。就像尼克的答案一样，但是像这样：

$("select").selectToUISlider({
    // labels and tooltipSrc are selectToUISlider specific options
    labels: 0,
    tooltipSrc: "value",
    sliderOptions: {
        // swapped out stop for change here
        change: function(e,ui) {
            console.log($('select').val());
        }
      }
});

使用selecttouislider的Onchange事件

2 个答案: