多个jQuery滑块连接到多个选择下拉列表

Question

您好我正在尝试使用以下代码将滑块附加到我的下拉列表中。其中一个正在工作，但我在处理滑块的多个功能时遇到了麻烦。这就是我所拥有的 -

`

<script>
 jQuery(function($) {
    var select = $( ".comment-overall_r select" );
    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;
  }
});
    $( ".comment-overall_r select" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
  </script>
<script>
 jQuery(function($) {
    var select2 = $( ".comment-overall_n_r select" );
    var slider2 = $( "<div id='slider'></div>" ).insertAfter( select2 ).slider({
    min: 1,
    max: 6,
    range: "min",
    value: select2[ 0 ].selectedIndex + 1,
    slide: function( event, ui ) {
    select2[ 0 ].selectedIndex = ui.value - 1;
  }
});
    $( ".comment-overall_n_r select" ).change(function() {
      slider2.slider( "value", this.selectedIndex + 1 );
    });
  });
  </script>

` 另外，我在控制台中看到第二个脚本/函数的错误 -

  

未捕获的TypeError：无法读取属性＆＃39; selectedIndex＆＃39;未定义的

我需要为4个下拉菜单做这个。我该如何正确执行？

Answer 1

请查看修改后的代码。有简单的想念。您为两个滑块分配了相同的ID <div id='slider'></div>。我刚给他们单独id并且现在正在工作。

＆＃13;

＆＃13;

jQuery(function($) {
  
    var select = $( ".comment-overall_r select" );
    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;
		}
    });
    $( ".comment-overall_r select" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  
  
  
  var select2 = $( ".comment-overall_n_r select" );
    var slider2 = $( "<div id='slider2'></div>" ).insertAfter( select2 ).slider({
    min: 1,
    max: 6,
    range: "min",
    value: select2[ 0 ].selectedIndex + 1,
    slide: function( event, ui ) {
		select2[ 0 ].selectedIndex = ui.value - 1;
	}
  });
  
 $( ".comment-overall_n_r select" ).change(function() {
   slider2.slider( "value", this.selectedIndex + 1 );
 });
  
  
});

＆＃13;

.mydiv{
  margin-bottom: 30px;
  }

select{
  margin-bottom: 15px;
  }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<div class="mydiv comment-overall_r">
  <select id="firstSelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select> 
</div>

<div class="mydiv comment-overall_n_r">
  <select id="secondSelect">
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
  </select> 
</div>

＆＃13;

＆＃13;

＆＃13;