多个jQuery滑块附加到多个选择下拉菜单 [英] Multiple jQuery sliders attached to multiple select dropdowns

问题描述

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

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

未捕获的TypeError:无法读取未定义的属性'selectedIndex'

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

我需要对4个下拉菜单执行此操作.如何正确执行?

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

推荐答案

请查看修改后的代码.有一个简单的小姐.您正在为两个滑块分配相同的ID <div id='slider'></div>.我只是给他们单独的id及其现在的工作.

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>

这篇关于多个jQuery滑块附加到多个选择下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！