Dynamiczne podstawianie ceny

Question

Witam. Jestem młodym programistą, który nie za dużo czasu obcował z JS, mam pytanie. Jak dynamicznie podmieniać ceny w zależności od wybranej opcji w 'select'

<select name="lista-produktow" id="lista">
                            <option value="-" id="0">Lista produktów</option>
                            <optgroup label="Fitness">
                                <option value="PowerBoard 2.0" id="1">PowerBoard 2.0</option>
                                <option value="Hantle Adonis i Olympia" id="2">Hantle Adonis i Olympia</option>
                            </optgroup>
                            <optgroup label="Masażery">
                                <option value="Quattromed IV" id="3">Quattromed IV</option>
                                <option value="Quattromed III" id="4">Quattromed III</option>
                                <option value="Canoo IV" id="5">Canoo IV</option>
                                <option value="Maxiwell III" id="6">Maxiwell III</option>
                                <option disabled="disabled" value="GymBelt">GymBelt  -  WYCOFANY</option>
                            </optgroup>
                            <optgroup label="Wyciskarki">
                                <option value="Hurom 500" id="7">Hurom 500</option>
                                <option value="Hurom HR" id="8">Hurom HR</option>
                                <option value="Hurom HH2G" id="9">Hurom HH2G</option>
                                <option value="Hurom HF2G" id="10">Hurom HF2G</option>
                                <option value="Hurom HG2G" id="11">Hurom HG2G</option>
                                <option value="Hurom DT" id="">Hurom DT</option>
                            </optgroup>
                            <optgroup label="Fotele">
                                <option value="Bismarck II" id="12">Bismarck II</option>
                                <option value="Hilton II" id="13">Hilton II</option>
                                <option value="Kennedy IV" id="14">Kennedy IV</option>
                                <option value="Skyliner A300" id="15">Skyliner A300</option>
                            </optgroup>
                            <option value="Zestaw do ozonoterapi" id="">Zestaw do ozonoterapi</option>
                        </select>

Jak to rozwiązać?

Answer 1

$('#lista').change(function() {
   var val = $('select option:selected').text();
   switch(val) {
	   case 'Canoo IV':
			//twój kod
	   break;
	   case 'Quattromed III':
			//twój kod
	   break;
   }
})

Teraz tylko podmienić ceny zależnie od opcji przez switch()

Comments

Byś mógł podać przykład switcha z 1. case, bo jestem totalnie bez wiedzy w JS?

---

Które ceny chcesz podmieniać? Ja nie widzę tam cen, a tylko nazwy produktów (jeśli już).

---

W divie jest ustawiona na stałe (żeby była tak orientacyjnie) i to jest 4490 PLN i ta cena jest w divie o id="cena". I właśnie w tym divie w zależności od wybranej opcji ma sie zmieniać cena

---

$('#lista').change(function() {
   var val = $('select option:selected').text();
   switch(val) {
	   case 'Canoo IV':
			//twój kod
	   break;
	   case 'Quattromed III':
			//twój kod
	   break;
   }
})

Przepraszam że wcześniej dałem Ci zły kod. Można to zrobić łatwiej ale jeżeli chcesz w ten sposób to teraz możesz sobie dokończyć. Możesz zawsze w value dać cenę i potem tylko wyświetlić ją na ekranie przejmując ją w ten sam sposób, czyli przez 

var val = $('select option:selected').text();

---

Bardzo dziękuje ! :D

---

Mam jeden problem. Wyświetla mi value które posiada select a nie value optionów

---

Przejrzyj dokładnie kod, bo u mnie wszystko działa.

---

Da się to zrobić bez jQuery i switch'a. Na zasadzie - pobierz cenę z selekta i wstaw bezpośrednio do tego DIVa, gdzie ma być ona wyświetlona. Nie trzeba tutaj switch

Przykład: https://jsfiddle.net/Ld172yj8/

Nie wiem skąd bierzesz ceny produktów - w poszczególnych selektach masz nazwy produktów. Jakąś stałą cenę masz w DIVie - czyli tam ma się pojawiać cena produktu(?), ale skąd ona ma zostać pobrana, jeśli w selektach są tylko nazwy produktów?

Answer 2

Spróbuj w ten sposób - bez switcha i jQuery. JavaScript tylko "kieruje" ceny z klikniętych select do odpowiedniego DIVa. Produkty dodajesz/usuwasz i modyfikujesz tylko w HTML, a JS jest bez zmian:

https://jsfiddle.net/Ld172yj8/