Mam do zrobienia formularz - a właściwie do dokończenia - w którym klient będzie sobie wybierał np wzór czegoś z selecta a po prawej stronie będzie się pokazywał obrazek pokazujący ten wzór. Problem jest jednak tego typu, że jak wybieram wzór to jest ok, ale pod spodem mam drugiego selecta i jak tam wybiorę sposób zapłaty to obrazek znika (bo nie ma żadnego rel które obsługuje napisana funkcja.
Jak zrobić, żeby funkcja odkrywająca obrazki z prawego diva działała tylko dla selecta o name="wzor" ?
<div style="display:inline-block;"> <form action="wyslij.php" method="POST" onsubmit="return validateForm(this);" style="margin-left: 5%">
<table style="background-color:#EEEEEE"> <tr><td width=150px>Imię*
</td><td><input type="text" style="width: 150px" name="imie"/></td></tr> <tr><td>Nazwisko*
</td><td><input type="text" style="width: 150px" name="nazwisko"/></td></tr> <tr><td>Adres*
</td><td><input type="text" style="width: 150px" name="adres1"/></td></tr> <tr><td>Adres
</td><td><input type="text" style="width: 150px"name="adres2"/></td></tr> <tr><td>e-mail*
</td><td><input type="text" style="width: 150px" name="email"/></td></tr>
<tr><td style="padding-top: 20px"><input type="submit" name="B1" value=" WYŚLIJ " style="font-size: 14px; padding:3px; padding-left: 10px; padding-right: 10px"></td></tr> <p style="font-size: 12px">* - pola wymagane
</p>
<div id="prawy" style="display:inline-block; width:30%; height:50%;"> <div style="display: none" id="id1"><img src=http://www.tapetus.pl/obrazki/n/112480_kolorowe-serduszka-tekstura.jpg ></div> <div style="display: none" id="id2"><img src=http://www.tapetus.pl/obrazki/n/84179_roze-tekstura.jpg></div> <div style="display: none" id="id3"><img src=http://www.tapeciarnia.pl/tapety/srednie/166394_kolorowa_jodelka_tekstura.jpg></div>
$(function() {
$('select').on('change', function() {
var id = $(this).find(':selected').attr('rel');
$("#prawy div").hide();
$("#prawy").find('#'+id).show();
});
});