Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript]zmiana powiązania w skrypcie js

Napisany przez: shreker 9.06.2019, 12:23:32

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 
  1. <http://december.com/html/4/element/div.html>
  2.   <http://december.com/html/4/element/select.html class="form-control" name="select1" id="select1">
  3.     <http://december.com/html/4/element/option.html id="0" value="0">wybierz ...</http://december.com/html/4/element/option.html>
  4.     <http://december.com/html/4/element/option.html id="1" value="1">Fruit</http://december.com/html/4/element/option.html>
  5.     <http://december.com/html/4/element/option.html id="2" value="2">Animal</http://december.com/html/4/element/option.html>
  6.     <http://december.com/html/4/element/option.html id="3" value="3">Bird</http://december.com/html/4/element/option.html>
  7.     <http://december.com/html/4/element/option.html id="4" value="4">Car</http://december.com/html/4/element/option.html>
  8.   </http://december.com/html/4/element/select.html>
  9. </http://december.com/html/4/element/div.html>
  10. <http://december.com/html/4/element/div.html>
  11.   <http://december.com/html/4/element/select.html class="form-control" name="select2" id="select2">
  12.     <http://december.com/html/4/element/option.html id="0" value="0">wybierz ...</http://december.com/html/4/element/option.html>
  13.     <http://december.com/html/4/element/option.html id="1" value="1">Banana</http://december.com/html/4/element/option.html>
  14.     <http://december.com/html/4/element/option.html id="1" value="1">Apple</http://december.com/html/4/element/option.html>
  15.     <http://december.com/html/4/element/option.html id="1" value="1">Orange</http://december.com/html/4/element/option.html>
  16.     <http://december.com/html/4/element/option.html id="2" value="2">Wolf</http://december.com/html/4/element/option.html>
  17.     <http://december.com/html/4/element/option.html id="2" value="2">Fox</http://december.com/html/4/element/option.html>
  18.     <http://december.com/html/4/element/option.html id="2" value="2">Bear</http://december.com/html/4/element/option.html>
  19.     <http://december.com/html/4/element/option.html id="3" value="3">Eagle</http://december.com/html/4/element/option.html>
  20.     <http://december.com/html/4/element/option.html id="3" value="3">Hawk</http://december.com/html/4/element/option.html>
  21.     <http://december.com/html/4/element/option.html id="4" value="4">BWM<http://december.com/html/4/element/option.html>
  22. </http://december.com/html/4/element/select.html>
  23. </http://december.com/html/4/element/div.html>
  24.  
  25. <http://december.com/html/4/element/script.html type="text/javascript">
  26. var $select1 = $( '#select1' ),
  27.       $select2 = $( '#select2' ),
  28.     $options = $select2.find( 'option' );
  29.  
  30. $select1.on( 'change', function() {
  31.    $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
  32. } ).trigger( 'change' );
  33. </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext

Napisany przez: trueblue 9.06.2019, 12:52:00

Zmienić "value" na "id".

id musi być unikalne w ramach dokumentu.

Napisany przez: shreker 9.06.2019, 12:54:44

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

Napisany przez: trueblue 9.06.2019, 13:01:54

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

Napisany przez: shreker 9.06.2019, 13:11:05

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 sad.gif ?

Napisany przez: trueblue 9.06.2019, 13:32:19

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#JavaScript_access

Napisany przez: viking 9.06.2019, 13:49:20

Zostawiasz this.value

Napisany przez: shreker 9.06.2019, 19:28:54

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 
  1. <http://december.com/html/4/element/div.html>
  2.   <http://december.com/html/4/element/select.html class="form-control" name="select1" id="select1">
  3.     <http://december.com/html/4/element/option.html id="1" value="1">wybierz ...</http://december.com/html/4/element/option.html>
  4.     <http://december.com/html/4/element/option.html id="2" value="2">Fruit</http://december.com/html/4/element/option.html>
  5.     <http://december.com/html/4/element/option.html id="3" value="3">Animal</http://december.com/html/4/element/option.html>
  6.     <http://december.com/html/4/element/option.html id="4" value="4">Bird</http://december.com/html/4/element/option.html>
  7.     <http://december.com/html/4/element/option.html id="5" value="5">Car</http://december.com/html/4/element/option.html>
  8.   </http://december.com/html/4/element/select.html>
  9. </http://december.com/html/4/element/div.html>
  10. <http://december.com/html/4/element/div.html>
  11.   <http://december.com/html/4/element/select.html class="form-control" name="select2" id="select2">
  12.     <http://december.com/html/4/element/option.html data-id="1" value="0">wybierz ...</http://december.com/html/4/element/option.html>
  13.     <http://december.com/html/4/element/option.html data-id="2" value="1">Banana</http://december.com/html/4/element/option.html>
  14.     <http://december.com/html/4/element/option.html data-id="2" value="1">Apple</http://december.com/html/4/element/option.html>
  15.     <http://december.com/html/4/element/option.html data-id="2" value="1">Orange</http://december.com/html/4/element/option.html>
  16.     <http://december.com/html/4/element/option.html data-id="3" value="2">Wolf</http://december.com/html/4/element/option.html>
  17.     <http://december.com/html/4/element/option.html data-id="3" value="2">Fox</http://december.com/html/4/element/option.html>
  18.     <http://december.com/html/4/element/option.html data-id="3" value="2">Bear</http://december.com/html/4/element/option.html>
  19.     <http://december.com/html/4/element/option.html data-id="4" value="3">Eagle</http://december.com/html/4/element/option.html>
  20.     <http://december.com/html/4/element/option.html data-id="4" value="3">Hawk</http://december.com/html/4/element/option.html>
  21.     <http://december.com/html/4/element/option.html data-id="5" value="4">BWM<http://december.com/html/4/element/option.html>
  22. </http://december.com/html/4/element/select.html>
  23. </http://december.com/html/4/element/div.html>
  24.  
  25. <http://december.com/html/4/element/script.html type="text/javascript">
  26. var $select1 = $('#select1'),
  27. 		$select2 = $('#select2'),
  28.     $options = $select2.find('option');
  29.  
  30. $select1.on('change', function() 
  31. {
  32. 	$select2.html($options.filter('[data-id="' + this.id + '"]'));
  33. }).trigger('change');
  34. </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext

Napisany przez: trueblue 9.06.2019, 19:50:17

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.

Napisany przez: shreker 9.06.2019, 20:07:12

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

Napisany przez: trueblue 9.06.2019, 20:12:31

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.

Napisany przez: shreker 9.06.2019, 20:16:12

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 ?

Napisany przez: trueblue 9.06.2019, 20:25:51

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

Napisany przez: shreker 9.06.2019, 20:31:25

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 smile.gif

Napisany przez: trueblue 9.06.2019, 20:37:11

Wtedy tak:

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

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

Napisany przez: shreker 9.06.2019, 20:40:16

Super, dzięki serdeczne za pomoc smile.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)