[Wolontariat][JavaScript][jQuery] Dynamiczne zliczanie z select Opcje

[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:

[HTML] pobierz, plaintext 
<select name="wybierz1">
<option value="1" selected="selected">Wartosc 1</option>
<option value="2">Wartosc 2</option>
<option value="3">Wartosc 3</option>
</select>
[HTML] pobierz, plaintext 

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.

Ten post edytował Daiquiri 25.08.2011, 10:27:20

Powód edycji: [Daiquiri]: Skoro szukasz gotowca, przenoszę i dodaję tag

[-SoloverCobra-]

http://docs.jquery.com/Main_Page
http://webhosting.pl/print/Kurs.jQuery.Cze...cje.kodu.strony

Masz na Google bana?(IMG:style_emoticons/default/smile.gif)

[desavil]

http://docs.jquery.com/Main_Page
http://webhosting.pl/print/Kurs.jQuery.Cze...cje.kodu.strony

Masz na Google bana?(IMG:style_emoticons/default/smile.gif)

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

Ten post edytował desavil 25.08.2011, 10:18:20

[--SoloverCobra--]

Poszukaj więc jakiejś agencji interaktywnej, która Ci to napisze. Za darmo umarło jak to powiadają (IMG:style_emoticons/default/smile.gif)

Powód edycji: [Daiquiri]: Darujmy sobie, ok? :)

[askone]

Mam dziś dzień dobroci więc proszę (IMG:style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
<select class="sum" name="wybierz1">
	<option value="1" selected="selected">Wartosc 1</option>
	<option value="2">Wartosc 2</option>
	<option value="3">Wartosc 3</option>
</select>
<select class="sum" name="wybierz2">
	<option value="10" selected="selected">Wartosc 10</option>
	<option value="22">Wartosc 22</option>
	<option value="31">Wartosc 31</option>
</select>
<select class="sum" name="wybierz3">
	<option value="11" selected="selected">Wartosc 11</option>
	<option value="20">Wartosc 20</option>
	<option value="19">Wartosc 19</option>
</select>
<div id="result">
	0
</div>
<script type="text/javascript">
	var suma = 0;
	$(".sum").each(function(){
		suma += parseInt($(this).val());
	});
	$("#result").text(suma);
</script>
[HTML] pobierz, plaintext 

Analiza należy już do Ciebie (IMG:style_emoticons/default/smile.gif)

Ten post edytował askone 25.08.2011, 13:34:14

[desavil]

Dzięki. (IMG:style_emoticons/default/smile.gif)

Ale i tak coś nie działa, cały czas wyświetla liczbę 3 i się nie zmienia.

Ten post edytował desavil 25.08.2011, 11:01:13

[kamil4u]

Przydałoby się zdarzenie onchange (IMG:style_emoticons/default/smile.gif) -> http://jsfiddle.net/HMkEW/

[desavil]

Wymyśliłem coś takiego:

[HTML] pobierz, plaintext 
<script type="text/javascript">
$("#calc2_op1").change(function() {
	 if( $("#calc2_op1").val() == 1 ){ var txt = 2; }
else if( $("#calc2_op1").val() == 2 ){ var txt = 4; }
else if( $("#calc2_op1").val() == 3 ){ var txt = 6; }
else if( $("#calc2_op1").val() == 4 ){ var txt = 8; }
else if( $("#calc2_op1").val() == 5 ){ var txt = 10; }
  $("#order_cost").text(txt);
});
 
$("#calc2_op2").change(function() {
	 if( $("#calc2_op2").val() == 1 ){ var txt = 3; }
else if( $("#calc2_op2").val() == 2 ){ var txt = 5; }
else if( $("#calc2_op2").val() == 3 ){ var txt = 13; }
else if( $("#calc2_op2").val() == 4 ){ var txt = 17; }
  $("#order_cost").text(txt);
});
 
var first = $("#calc2_op1, #calc2_op2 option:first").change();
$("#order_cost").text(first);
</script>
[HTML] pobierz, plaintext 

Z jednym selectem działa bez problemów, natomiast jak są dwa, jak dodać te wartości?

Ten post edytował desavil 25.08.2011, 13:05:36

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

Ten post edytował desavil 25.08.2011, 13:20:02

[askone]

$("#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ę...

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

Ten post edytował askone 25.08.2011, 13:35:41

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

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ść (IMG:style_emoticons/default/smile.gif)

Ten post edytował desavil 25.08.2011, 13:43:55

[askone]

O ile dobrze Cię zrozumiałem to kod powinien wyglądać tak:

[HTML] pobierz, plaintext 
<select id="calc2_op1" class="sum" name="wybierz1">
	<option value="1" selected="selected">Wartosc 1</option>
	<option value="2">Wartosc 2</option>
	<option value="3">Wartosc 3</option>
	<option value="4">Wartosc 4</option>
	<option value="5">Wartosc 5</option>    
</select>
<select id="calc2_op2" class="sum" name="wybierz2">
	<option value="1" selected="selected">Wartosc 1</option>
	<option value="2">Wartosc 2</option>
	<option value="3">Wartosc 3</option>
	<option value="4">Wartosc 4</option>    
</select>
<div id="result">
	0
</div>
<script type="text/javascript">
	var arr = new Array();
	arr["calc2_op1_1"] = 2;
	arr["calc2_op1_2"] = 4;
	arr["calc2_op1_3"] = 6;
	arr["calc2_op1_4"] = 8;
	arr["calc2_op1_5"] = 10;
	arr["calc2_op2_1"] = 3;
	arr["calc2_op2_2"] = 5;
	arr["calc2_op2_3"] = 13;
	arr["calc2_op2_4"] = 17;
 
	$(".sum").change(function(){
		var suma = 0;
		$(".sum").each(function(){
			var wartosc = arr[$(this).attr("id") + "_" + $(this).val()];
 
			suma += parseInt(wartosc);
		});
		$("#result").text(suma);
	}).change();
</script>
[HTML] pobierz, plaintext 

[desavil]

Tak, o to.

Dzięki Wielkie (IMG:style_emoticons/default/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.