Question

我在面板标题内有一个选择，其中包含数字1-512。这些数字代表一个频道。

<div class="panel-heading">
  <select class="channel"></select>
</div>

在面板主体中，我有一个输入范围滑块（rangeslider.js）。

<div class="panel-body">
  <input type="range" class="slider"></input>
</div>

每当我移动滑块时，我想获得滑块的值和面板标题中选择的通道编号。我该怎么做呢？

提前致谢。

我到目前为止的Jquery代码：

for (i = 1; i <= 512; i++)
{
  $('.channel').append($('<option>',
  {
    value: i,
    text: i
  }));
}

$('.slider').rangeslider({
    onSlide: function(position, value) {
      console.log(value);
    }
});

编辑：忘了提这个，但我有多个面板，所以$（'。channel'）。val（）只返回第一个选择的值。移动滑块时，我想获得与滑块位于同一面板中的选择值。

Answer 1

在onSlide回调中，您可以设置select元素的值，如

$('.slider').rangeslider({
    onSlide: function(position, value) {
      console.log(value);
      $(".channel").val(value);
    }
});

Answer 2

我创建了一个JSFiddle，演示了如何获取滑块的值并根据滑块的值更改选项框：

DEMO：https://jsfiddle.net/87ocdkLr/

$(document).ready(function(){
  for (i = 1; i <= 512; i++)
  {
    $('.channel').append($('<option>',
                           {
      value: i,
      text: i
    }));
  }

  $('.slider').change(function() {
    $("select").val($(".slider").val()).change();
  });
});

如何在面板标题中获取选择值

2 个答案: