Несколько слайдеров 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> 

` Также я вижу эту ошибку в консоли для 2-го сценария/функции -

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

мне нужно сделать это для 4 выпадающие. Как я могу выполнить правильно?

Answer 1

Пожалуйста, ознакомьтесь с измененным кодом. Простой промах. Вы назначали одинаковый идентификатор <div id='slider'></div> для обоих слайдеров. Я просто дал отдельный id им и его работе сейчас.

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) { 
 
\t \t select[ 0 ].selectedIndex = ui.value - 1; 
 
\t \t } 
 
    }); 
 
    $(".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) { 
 
\t \t select2[ 0 ].selectedIndex = ui.value - 1; 
 
\t } 
 
    }); 
 
    
 
$(".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>