Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]zmiana powiązania w skrypcie js
shreker
post 9.06.2019, 12:23:32
Post #1





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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

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


Ten post edytował shreker 9.06.2019, 12:55:21
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 15)
trueblue
post 9.06.2019, 12:52:00
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Zmienić "value" na "id".

id musi być unikalne w ramach dokumentu.


--------------------
Go to the top of the page
+Quote Post
shreker
post 9.06.2019, 12:54:44
Post #3





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


a czy da się nap powiązań według "rel" ?
Go to the top of the page
+Quote Post
trueblue
post 9.06.2019, 13:01:54
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
shreker
post 9.06.2019, 13:11:05
Post #5





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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 ?

Ten post edytował shreker 9.06.2019, 13:11:45
Go to the top of the page
+Quote Post
trueblue
post 9.06.2019, 13:32:19
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
viking
post 9.06.2019, 13:49:20
Post #7





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Zostawiasz this.value


--------------------
Go to the top of the page
+Quote Post
shreker
post 9.06.2019, 19:28:54
Post #8





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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

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


Ten post edytował shreker 9.06.2019, 19:29:54
Go to the top of the page
+Quote Post
trueblue
post 9.06.2019, 19:50:17
Post #9





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.

Ten post edytował trueblue 9.06.2019, 19:51:16


--------------------
Go to the top of the page
+Quote Post
shreker
post 9.06.2019, 20:07:12
Post #10





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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).
Go to the top of the page
+Quote Post
trueblue
post 9.06.2019, 20:12:31
Post #11





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
shreker
post 9.06.2019, 20:16:12
Post #12





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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 ?

Ten post edytował shreker 9.06.2019, 20:18:43
Go to the top of the page
+Quote Post
trueblue
post 9.06.2019, 20:25:51
Post #13





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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

Ten post edytował trueblue 9.06.2019, 20:26:03


--------------------
Go to the top of the page
+Quote Post
shreker
post 9.06.2019, 20:31:25
Post #14





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


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

Ten post edytował shreker 9.06.2019, 20:34:12
Go to the top of the page
+Quote Post
trueblue
post 9.06.2019, 20:37:11
Post #15





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Wtedy tak:
  1. $(this).children(':selected').attr('id');
lub:
  1. $(this).find(':selected').attr('id');

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


--------------------
Go to the top of the page
+Quote Post
shreker
post 9.06.2019, 20:40:16
Post #16





Grupa: Zarejestrowani
Postów: 270
Pomógł: 0
Dołączył: 21.05.2008

Ostrzeżenie: (0%)
-----


Super, dzięki serdeczne za pomoc smile.gif

Ten post edytował shreker 9.06.2019, 20:43:10
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 23:46