Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Wolontariat][JavaScript][jQuery] Dynamiczne zliczanie z select
Forum PHP.pl > Inne > Giełda ofert > Poszukuję
desavil
Witam, co do jQuery mam niewielkie pojęcie i jak na razie nie mam czasu się go uczyć.
A potrzebuję pewien skrypt, najlepiej aby był w jQuery. Chodzi mi o dynamiczne zliczanie wartości z select oraz przyporządkowanie im odpowiednich wartości.

Podam przykład, mam sobie taki select:
  1. <select name="wybierz1">
  2. <option value="1" selected="selected">Wartosc 1</option>
  3. <option value="2">Wartosc 2</option>
  4. <option value="3">Wartosc 3</option>

Teraz chciałbym, aby jak ktoś wybierze np. wybierz1->option:2

To na dole jest np. div (<div id="licz"></div>) i wyświetlana jest wartość.
Np. value=1 odpowiada liczba 5, value=2 odpowiada liczba 1 itp.

I to jest dynamicznie jak ktoś wybierze wyświetlane jest w divie.
Chciałbym, aby można było użyć kilka selectów i łączyć ich sumy później również.

Bardzo bym prosił kogoś o napisanie takiego skryptu, i aby był w miarę prosty do dodawania kolejnych wartości, selectów.

Pozdrawiam.
desavil
Cytat(SoloverCobra @ 25.08.2011, 11:15:25 ) *

Naucz się najpierw czytać ze zrozumieniem, a później udzielaj się na forach:
co do jQuery mam niewielkie pojęcie i jak na razie nie mam czasu się go uczyć.
-SoloverCobra-
Poszukaj więc jakiejś agencji interaktywnej, która Ci to napisze. Za darmo umarło jak to powiadają smile.gif
askone
Mam dziś dzień dobroci więc proszę smile.gif
  1. <select class="sum" name="wybierz1">
  2. <option value="1" selected="selected">Wartosc 1</option>
  3. <option value="2">Wartosc 2</option>
  4. <option value="3">Wartosc 3</option>
  5. <select class="sum" name="wybierz2">
  6. <option value="10" selected="selected">Wartosc 10</option>
  7. <option value="22">Wartosc 22</option>
  8. <option value="31">Wartosc 31</option>
  9. <select class="sum" name="wybierz3">
  10. <option value="11" selected="selected">Wartosc 11</option>
  11. <option value="20">Wartosc 20</option>
  12. <option value="19">Wartosc 19</option>
  13. <div id="result">
  14. 0
  15. </div>
  16. <script type="text/javascript">
  17. var suma = 0;
  18. $(".sum").each(function(){
  19. suma += parseInt($(this).val());
  20. });
  21. $("#result").text(suma);


Analiza należy już do Ciebie smile.gif
desavil
Dzięki. smile.gif

Ale i tak coś nie działa, cały czas wyświetla liczbę 3 i się nie zmienia.
kamil4u
Przydałoby się zdarzenie onchange smile.gif -> http://jsfiddle.net/HMkEW/
desavil
Wymyśliłem coś takiego:
  1. <script type="text/javascript">
  2. $("#calc2_op1").change(function() {
  3. if( $("#calc2_op1").val() == 1 ){ var txt = 2; }
  4. else if( $("#calc2_op1").val() == 2 ){ var txt = 4; }
  5. else if( $("#calc2_op1").val() == 3 ){ var txt = 6; }
  6. else if( $("#calc2_op1").val() == 4 ){ var txt = 8; }
  7. else if( $("#calc2_op1").val() == 5 ){ var txt = 10; }
  8. $("#order_cost").text(txt);
  9. });
  10.  
  11. $("#calc2_op2").change(function() {
  12. if( $("#calc2_op2").val() == 1 ){ var txt = 3; }
  13. else if( $("#calc2_op2").val() == 2 ){ var txt = 5; }
  14. else if( $("#calc2_op2").val() == 3 ){ var txt = 13; }
  15. else if( $("#calc2_op2").val() == 4 ){ var txt = 17; }
  16. $("#order_cost").text(txt);
  17. });
  18.  
  19. var first = $("#calc2_op1, #calc2_op2 option:first").change();
  20. $("#order_cost").text(first);


Z jednym selectem działa bez problemów, natomiast jak są dwa, jak dodać te wartości?
kamil4u
Można wiedzieć co chcesz osiągnąć? Popatrz na kod, który Ci dałem(a bardziej ~askone) i napisz czego Ci w nim brakuje. Pozmieniaj value w option i zobacz co się stanie.
desavil
Kod mi działa, napisałem go inaczej niż Wy podawaliście.
Chodzi mi o to, że w tym moim kodzie jak mam 1 select to działa on bez problemów, ale jak już mam dwa to jak zliczać te wartości z tych dwóch funkcji?

Niestety value nie mogę mieć takich samych jak chcę osiągnąć, tylko muszę je zamienić tak jak to napisałem powyżej.
Gdyż pod to mam już przygotowany również kod PHP, którego nie mogę zmienić.
askone
Cytat
$("#calc2_op1").change(function()
$("#calc2_op2").change(function()

Bezsensem jest działanie w Twoim przypadku na id - przez takie rozwiązanie musisz duplikować kod. Lepiej nadaj wszystkim selectom, które mają być sumowane wspólną klasę - tak jak ja zrobiłem. Wtedy niezależnie od liczby tych selectów kod jquery będzie działał. Ważne tylko by select miał właściwą klasę...

Cytat
Chodzi mi o to, że w tym moim kodzie jak mam 1 select to działa on bez problemów, ale jak już mam dwa to jak zliczać te wartości z tych dwóch funkcji?

Przecież napisana funkcja zlicza wartości z wszystkich selectów.

Poza tym kod, który napisałeś ma 0 (słownie: zero) cech kodu dynamicznego... Jak zmieni się liczba opcji w dowolnym z obiektów select to Twój kod się wysypie, lub będziesz musiał go zmieniać.

ps. Zmieniłem wartości value dla opcji w selectach. Sprawdź, że kod i tak będzie poprawnie je sumował. Oczywiście musisz całośc "ubrać" w zdarzenie onchange() tak jak linkował Kamil4u
desavil
Tylko, nie rozumiecie że ja nie mogę mieć wartości pobranych z value i ich dodawać?
Muszę danym value przypisać wartość osobno w kodzie jQuery/if. - nawet napisałem to w pierwszym poście.

Cytat(askone @ 25.08.2011, 14:32:17 ) *
Poza tym kod, który napisałeś ma 0 (słownie: zero) cech kodu dynamicznego... Jak zmieni się liczba opcji w dowolnym z obiektów select to Twój kod się wysypie, lub będziesz musiał go zmieniać.

To chyba wiadome, gdyż znów będę musiał przydzielić odpowiednią wartość smile.gif
askone
O ile dobrze Cię zrozumiałem to kod powinien wyglądać tak:
  1. <select id="calc2_op1" class="sum" name="wybierz1">
  2. <option value="1" selected="selected">Wartosc 1</option>
  3. <option value="2">Wartosc 2</option>
  4. <option value="3">Wartosc 3</option>
  5. <option value="4">Wartosc 4</option>
  6. <option value="5">Wartosc 5</option>
  7. <select id="calc2_op2" class="sum" name="wybierz2">
  8. <option value="1" selected="selected">Wartosc 1</option>
  9. <option value="2">Wartosc 2</option>
  10. <option value="3">Wartosc 3</option>
  11. <option value="4">Wartosc 4</option>
  12. <div id="result">
  13. 0
  14. </div>
  15. <script type="text/javascript">
  16. var arr = new Array();
  17. arr["calc2_op1_1"] = 2;
  18. arr["calc2_op1_2"] = 4;
  19. arr["calc2_op1_3"] = 6;
  20. arr["calc2_op1_4"] = 8;
  21. arr["calc2_op1_5"] = 10;
  22. arr["calc2_op2_1"] = 3;
  23. arr["calc2_op2_2"] = 5;
  24. arr["calc2_op2_3"] = 13;
  25. arr["calc2_op2_4"] = 17;
  26.  
  27. $(".sum").change(function(){
  28. var suma = 0;
  29. $(".sum").each(function(){
  30. var wartosc = arr[$(this).attr("id") + "_" + $(this).val()];
  31.  
  32. suma += parseInt(wartosc);
  33. });
  34. $("#result").text(suma);
  35. }).change();
desavil
Tak, o to.

Dzięki Wielkie smile.gif

@Edit
Chociaż jest jeden błąd, co prawda mały, ale może da się go naprawić.
Chodzi o to, że jak select zmienia się strzałkami to wartość wyświetlana ta dynamicznie się nie zmienia.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.