Dynamiczny select javascript

Main Page -> Forum Index -> Programming Generally -> Dynamiczny select javascript

Author

Message

Blizniack
Poziom 9

Joined: 19 Jun 2008
Posts: 39
Location: Wejherowo

02 Sep 2009 20:25

Dynamiczny select javascript

Witam. Po pierwsze, znam dobrze HTML i PHP, ale z Javascripta jestem kompletnie zielony. Mam sobie formularz:

Quote:

<tr><td>Kolor : </td><td><select name="kolor" size="1" class="mail">
<option value="" selected></option>
<option value="zie">zielony</option>
<option value="cze">czerwony</option>
<option value="nie">niebieski</option>
<option value="zol">żołty</option>
</select><br></td></tr>

i teraz chce, zeby w razie wyboru jednego z nich, javascript generowal obok kolejny select, tzn.:

Quote:

<tr><td>Kolor : </td><td><select name="kolor" size="1" class="mail">
<option value="" selected></option>
<option value="jaszie">jasnozielony</option>
<option value="zwyzie">zwyczajny zielony</option>
<option value="ciezie">ciemnozielony</option>
</select><br></td></tr>

dla kazdego koloru osobny taki select. da sie to zrobic? nie mowcie, zebym zrobil to w jednym select, bo kolory to tutaj tylko przyklad a tego co chce zrobic nie da sie w 1 selecta upchnac.

bardzo prosze o pomoc, najlepiej gotowy javascript kod, chocby nawet w skroconej wersji. z gory dziekuje.

Google

Google Adsense

02 Sep 2009 20:25

ostry_18
Poziom 20

Joined: 05 Mar 2005
Posts: 804
Location: Sanok/Warszawa

#2 02 Sep 2009 23:57 helpful post - solution

Re: Dynamiczny select javascript

działa, mam nadzieje że sam rozpracujesz kod.
(kod czerpie z jQuery garściami)

Code:

<body>
<select id="s1">
<option value="" selected="selected"> -- </option>
<option value="0">opel</option>
<option value="1">citroen</option>
<option value="2">mitsubishi</option>
</select>
<div id="s2">
<select><option value=" "> </option></select>
</div>
<script type="text/javascript" language="JavaScript" src="jquery.js"></script>
<script type="text/javascript">

var dane = [{corsa:"Corsa 1.4", vectra:"Vectra", astra:"Pudło"},{berlingo:"Berlingoo", xsara:"Ładna xsara"},{diamante:"Tylko jedno autko, M.diamante"} ];

$("#s1").change(function() {
var tekst = ''
tekst = "<select>";
jQuery.each(dane[$("#s1").val()], function(nazwa,wartosc) {
tekst += "<option value='"+nazwa+"'>"+wartosc+"</option>";
});
tekst += "</select>";
$("#s2").html(tekst);
});
</script>
</body>