[JavaScript] problem z 'selectedIndex' of undefined Opcje

[nikestylex7]

Tak jak w temacie stworzyłem suwaki z jquery ui 4 sztuki.
Podstrone rejestracja podzieliłem na kroki są dwa czyli w pierwszym dane i jeden suwak w drugim dane i 3 suwaki.
Problem polega na tym iż pierwszy suwak działa poprawnie lecz kolejne 3 już nie. W consoli mam błąd 'selectedIndex' of undefined.
Oraz czy nie dało by się tych trzech ostatnich połączyć aby się nie powielały a odnosiły do innych divów ?

Poniżej cztery suwaki

[JAVASCRIPT] pobierz, plaintext 
<script>
$(function() {
    var select = $( '#minbeds');
    var slider = $( "#slider" ).slider({
      min: 0,
      max: 200,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
 </script>
 <script>
$(function() {
    var select = $( "#minbeds1" );
    var slider = $( "#slider1" ).slider({
      min: 0,
      max: 100,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds1" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
 </script>
 <script>
$(function() {
    var select = $( "#minbeds2" );
     var slider = $( "#slider2" ).slider({
      min: 0,
      max: 100,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds2" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
 </script>
 <script>
$(function() {
    var select = $( "#minbeds3" );
     var slider = $( "#slider3" ).slider({
      min: 0,
      max: 100,
      range: "min",
      value: select[0].selectedIndex + 1,
      slide: function( event, ui ) {
        select[0].selectedIndex = ui.value - 1;
      }
    });
    $( "#minbeds3" ).change(function() {
      slider.slider( "value", this.selectedIndex + 1 );
    });
  });
 </script>
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował nikestylex7 17.12.2015, 20:18:13

[darko]

Bez htmla ciężko coś poradzić. Da się to zlepić w całość, wystarczyłoby się przejechać po tablicy elementów.

[nikestylex7]

błąd dotyczy 2 suwaka o id minbeds1
a dokladnie

[HTML] pobierz, plaintext 
select[0].selectedIndex + 1,
[HTML] pobierz, plaintext 

o to ciagle sie rozchodzi

[darko]

Zrób porządek w tych skryptach, wklej tutaj cały kod włącznie z htmlem.

[nikestylex7]

takie same pętle są dla ostatnich 3 suwaków

[PHP] pobierz, plaintext 
<select id="minbeds1" name="sm">
<?php
for ($i = 1; $i <= 50; $i+=0.5): 
 
                                ?>   
                                <option value="<?php echo $i; ?>"<?php if($data['dane']['sm'] == $i){ echo' selected'; }?>><?php echo $i; ?></option>
                                <?php endfor; ?>												
  </select><div id="slider1"></div>
[PHP] pobierz, plaintext 

[darko]

Identyfikatora elementu select nie zmieniasz.

[nikestylex7]

zmieniam każdy ma inne id czyli minbeds1 minbeds2 itd.

tutaj naprzyklad smiga lecz na stronie juz nie
https://jsfiddle.net/5o5dtfwj/