Multiple jQuery sliders attached to multiple selec

问题:

Hi I am trying to use the following code to attach sliders to my dropdowns. One of them is working but I am having trouble with handling multiple functions for the sliders. Here's what I have --

`

<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>

` Also I see this error in the console for the 2nd script/function --

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

I need to do this for 4 dropdowns. How do I execute correctly?

回答1:

Please look at modified code. There was simple miss. You were assigning same id <div id='slider'></div> to both slider. I just given separate id to them and its working now.

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

.mydiv{
  margin-bottom: 30px;
  }

select{
  margin-bottom: 15px;
  }

<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>