Witam, mam pytanie odnośnie przerobienia skryptu js. Obecnie powiązanie option odnosi się do "value", jak przerobic skrypt żeby powiązanie odnosiło się do "id" lub "rel" ?

[HTML] pobierz, plaintext 
<div>
  <select class="form-control" name="select1" id="select1">
    <option id="0" value="0">wybierz ...</option>
    <option id="1" value="1">Fruit</option>
    <option id="2" value="2">Animal</option>
    <option id="3" value="3">Bird</option>
    <option id="4" value="4">Car</option>
  </select>
</div>
<div>
  <select class="form-control" name="select2" id="select2">
    <option id="0" value="0">wybierz ...</option>
    <option id="1" value="1">Banana</option>
    <option id="1" value="1">Apple</option>
    <option id="1" value="1">Orange</option>
    <option id="2" value="2">Wolf</option>
    <option id="2" value="2">Fox</option>
    <option id="2" value="2">Bear</option>
    <option id="3" value="3">Eagle</option>
    <option id="3" value="3">Hawk</option>
    <option id="4" value="4">BWM<option>
</select>
</div>
 
<script type="text/javascript">
var $select1 = $( '#select1' ),
      $select2 = $( '#select2' ),
    $options = $select2.find( 'option' );
 
$select1.on( 'change', function() {
   $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
</script>
[HTML] pobierz, plaintext 

Zmienić "value" na "id".

id musi być unikalne w ramach dokumentu.

a czy da się nap powiązań według "rel" ?

Najlepiej użyć atrybutu data-*, np. data-id="1".

zmieniłem na :
<div>
<select class="form-control" name="select1" id="select1">
<option data-id="1" value="0">wybierz ...</option>
<option data-id="2" value="1">Fruit</option>
<option data-id="3" value="2">Animal</option>
<option data-id="4" value="3">Bird</option>
<option data-id="5" value="4">Car</option>
</select>
</div>
<div>
<select class="form-control" name="select2" id="select2">
<option data-id="1" value="0">wybierz ...</option>
<option data-id="2" value="1">Banana</option>
<option data-id="2" value="1">Apple</option>
<option data-id="2" value="1">Orange</option>
<option data-id="3" value="2">Wolf</option>
<option data-id="3" value="2">Fox</option>
<option data-id="3" value="2">Bear</option>
<option data-id="4" value="3">Eagle</option>
<option data-id="4" value="3">Hawk</option>
<option data-id="5" value="4">BWM<option>
</select>
</div>

<script type="text/javascript">
var $select1 = $('#select1'),
$select2 = $('#select2'),
$options = $select2.find('option');

$select1.on('change', function()
{
$select2.html($options.filter('[data-id="' + data-id + '"]'));
}).trigger('change');
</script>

ale nie działa, co musze zmieić w js, niestety nie mam pojęcia o js ?

https://developer.mozilla.org/en-US/docs/Le...vaScript_access

Zostawiasz this.value

super działa z przypisaniem zależności do "value" z select1, ale czy da się przypisać do id zamiast do value ?

[HTML] pobierz, plaintext 
<div>
  <select class="form-control" name="select1" id="select1">
    <option id="1" value="1">wybierz ...</option>
    <option id="2" value="2">Fruit</option>
    <option id="3" value="3">Animal</option>
    <option id="4" value="4">Bird</option>
    <option id="5" value="5">Car</option>
  </select>
</div>
<div>
  <select class="form-control" name="select2" id="select2">
    <option data-id="1" value="0">wybierz ...</option>
    <option data-id="2" value="1">Banana</option>
    <option data-id="2" value="1">Apple</option>
    <option data-id="2" value="1">Orange</option>
    <option data-id="3" value="2">Wolf</option>
    <option data-id="3" value="2">Fox</option>
    <option data-id="3" value="2">Bear</option>
    <option data-id="4" value="3">Eagle</option>
    <option data-id="4" value="3">Hawk</option>
    <option data-id="5" value="4">BWM<option>
</select>
</div>
 
<script type="text/javascript">
var $select1 = $('#select1'),
		$select2 = $('#select2'),
    $options = $select2.find('option');
 
$select1.on('change', function() 
{
	$select2.html($options.filter('[data-id="' + this.id + '"]'));
}).trigger('change');
</script>
[HTML] pobierz, plaintext 

Podałem Ci przykład jak pobrać wartość z atrybutu data-id.
Value niekoniecznie jest dobrym pomysłem, bo kiedy będziesz przesyłał wartość takiego select, to nie będziesz wiedział, który z trzech owoców wybrał użytkownik. Wartości value powinny być w takim przypadku również unikalne, przynajmniej w ramach grupy.

rozumiem to co napisałeś odnośnie, że pobieranie atrybutu "value" nie jest dobrym pomysłem dlatego chciałem zrobić tak żeby w select1 przypisane były opcje po id (które są unikalne tak jak napisałeś). Ale w coś jest nie tak w kodzie javascript bo opcje nie są pobierane (pusty select).

Proponuję, abyś spojrzał jeszcze raz w link, który podałem wyżej.

Unikalność id i unikalność wartości value, to dwie różne kwestie. Póki co rozwiązałeś pierwszą, i dobrze. Jeśli chodzi o drugą, to na razie możesz pozostawić tak jak jest, ale za jakiś czas sam zorientujesz się, że wartości w atrybucie value dobrze, aby również były unikalne.

czyli nie mogę powiązać opcji z selecta 2 z opcjami selecta 1 za pomocą id a nie value z selecta 1 ?
Chodzi o to że przy powiązaniu do value wszystko działą, ale jak zmienić w funkcji żeby powiązanie było do id a nie do value ?

Oj, przepraszam. Nie spojrzałem dokładnie w kod.
Porpozycja vikinga jest ok - możesz się posiłkować value (bo pobierasz tą wartość z pierwszego select). Rozwiązanie z użyciem data-id jest jak najbardziej prawidłowe.
A więc całość powinna u Ciebie działać: https://jsfiddle.net/en4y78wr/

P.S. Unikalność value w drugim select nadal warto wdrożyć.

tak, ta wersja działą, do tego już doszedłem, ale nie zrozumieliśmy się dalej. bo wersja którą dałeś pobiera opcja na podstawie value z select1, a mi chodziło o to żeby pobierało opcje po id z select1, czy raczej według zamieszczonego przez ciebie kodu po data-id z select1

Wtedy tak:

[HTML] pobierz, plaintext 
$(this).children(':selected').attr('id');
[HTML] pobierz, plaintext 

lub:

[HTML] pobierz, plaintext 
$(this).find(':selected').attr('id');
[HTML] pobierz, plaintext 

Ale lepiej tam też użyć atrybutów data-id, a nie id.

Super, dzięki serdeczne za pomoc