Door
Roy Marijnissen
op 05-01-2012 22:44
gewijzigd op 05-01-2012 23:07
2.856 views
Ik zit met het volgende. Ik heb een pull-down lijst met b.v. 1,2,3. Als iemand op 1 klikt en dan submit moet daaronder het plaatje komen te staan wat bij 1 hoort etc. Wat ik nu wil is dat zodra er op submit wordt geklikt onder het pull-down menu het plaatje tevoorschijn komt zonder dat de site refreshed. Alleen wat in die div staat moet kunnen veranderen na een klik op submit.
Weet iemand hoe dit moet, hoop dat ik het een beetje duidelijk heb uitgelegd wat ik zoek.
toevoeging, de url van het plaatje moet uit een database komen. Na het klikken moet dus eigenlijk een script gestart worden in alleen die div.
Voorbeeld : http://www.tubalr.com/ Alleen dat het zoekvlak omhoog schuift hoeft voor mij niet. De rest is precies zoals ik het bedoel !
<!DOCTYPE html>
<html>
<head>
<title>Lol</title>
</head>
<body>
<select id="plaatje-pulldown" name="plaatje">
<option value="">- Kies een plaatje -</option>
<option value="blueA.png">1</option>
<option value="blueB.png">2</option>
<option value="blueC.png">3</option>
</select>
<div id="plaatje-placeholder">Dit element wordt vervangen door het plaatje</div>
</body>
<script>
// het drop-down menuutje
var selector = document.getElementById('plaatje-pulldown');
// het plaatje wat momenteel wordt weergegeven
// (in eerste instantie niet echt een plaatje, maar iets om
// te markeren waar in de HTML het plaatje moet komen)
var plaatje = document.getElementById('plaatje-placeholder');
// update_plaatje vervangt het huidige plaatje met eentje
// met de waarde uit het drop-down menu.
function update_plaatje()
{
// pak welke option er geselecteerd is
var option = selector.options[selector.selectedIndex];
// Heeft deze option geen value (de 'kies een plaatje optie')
// doe dan niets.
if (!option.value)
return;
// Maak een nieuw plaatje aan, zet het src-attribuut.
var nieuw_plaatje = document.createElement('img');
nieuw_plaatje.src = 'http://google-maps-icons.googlecode.com/files/' + option.value;
// vervang het oude plaatje met het nieuwe plaatje
// in de HTML boom
plaatje.parentNode.replaceChild(nieuw_plaatje, plaatje);
// .. en onthoud dat dit het zichtbare plaatje is nu.
plaatje = nieuw_plaatje;
}
// Als de waarde van de drop-down verandert, update het plaatje.
selector.addEventListener('change', update_plaatje, false);
</script>
</html>
Als je nieuw bent met Javascript, en het vooral wil gebruiken voor dit soort dingen kan je mooi jQuery gebruiken. Dat is voor dit soort dingen (de DOM manipuleren) heel handig. En korter:
<!DOCTYPE html>
<html>
<head>
<title>Lol</title>
</head>
<body>
<select id="plaatje-pulldown" name="plaatje">
<option value="">- Kies een plaatje -</option>
<option value="blueA.png">1</option>
<option value="blueB.png">2</option>
<option value="blueC.png">3</option>
</select>
<div id="plaatje">Dit element wordt vervangen door het plaatje</div>
</body>
<script>
$('#plaatje-pulldown').change(function() {
if (!$(this).val())
return;
$('<img id="plaatje">')
.attr('src', 'http://google-maps-icons.googlecode.com/files/' + $(this).val())
.replaceAll('#plaatje');
});
</script>
</html>
Thanks ! Precies wat ik zoek ! Ik ga het morgen uitproberen, is er nog een verschil tussen code 1 en 2 behalve dat 1 uitleg bevat ? En is dit eigenlijk jQuery of is dat weer iets anders ?
Is er nog een verschil tussen code 1 en 2 behalve dat 1 uitleg bevat ? En is dit eigenlijk jQuery of is dat weer iets anders ?
De eerste lap code is gewoon puur kale JavaScript zoals iedere browser dat ondersteunt. De tweede lap code is ongeveer dezelfde oplossing, maar dan maak ik gebruik van de functies van jQuery. Op de achtergrond gebeurt ongeveer hetzelfde, maar jQuery laat je het op een directere manier opschrijven:
@Jelmer: Bij die eerste link zie ik geen plaatje en er verandert ook niks. Die tweede link werkt wel.
Ik zie het al. addEventListener moet eigenlijk 3 argumenten meekrijgen, maar nieuwere browsers (nieuwste versie van Firefox, Chrome) vinden 2 ook genoeg. zo werkt hij ook in Opera.
Ik heb het aangepast in m'n eerdere post.
