[JavaScript]zmiana powiązania w skrypcie js Opcje

[shreker]

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 

Ten post edytował shreker 9.06.2019, 12:55:21

[shreker]

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 (IMG:style_emoticons/default/sad.gif) ?

Ten post edytował shreker 9.06.2019, 13:11:45