De PHPhulp kroeg
Select event
Misschien een hele stomme vraag maar hoe kan ik makkelijk een select event maken met de volgende html code eventueel met javascript maar heb geen idee.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<select>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
Wat ik wil is als je optie 1 selecteer dat er een afbeelding word geopend in het scherm, hoe doe ik dit zonder <img src=''> te gebruiken?
Gewijzigd op 10/05/2011 11:32:55 door Ben Van de Voorde
Bart Wout op 10/05/2011 11:32:47:
Wat ik wil is als je optie 1 selecteer dat er een afbeelding word geopend in het scherm, hoe doe ik dit zonder <img src=''> te gebruiken?
De <img> tag is de enige manier om een image in HTML weer te geven, daar kun je dus niet omheen. Als je alle betreffende <img> een style geeft die ervoor zorgt dat ze niet weergegeven worden (display:none), kun je met javascript deze style later veranderen zodra een optie geselecteerd is...
Gewijzigd op 10/05/2011 13:32:00 door Ben Van de Voorde
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$('#option').change(function() {
var value = $(this).val();
$('#image').attr('src', value);
});
</script>
<select name="option" id="option">
<option value="images/image1.jpg">Afbeelding 1</option>
<option value="images/image2.jpg">Afbeelding 2</option>
<option value="images/image3.jpg">Afbeelding 3</option>
</select>
<img src="images/image.jpg" alt="Afbeelding" />
$('#option').change(function() {
var value = $(this).val();
$('#image').attr('src', value);
});
</script>
<select name="option" id="option">
<option value="images/image1.jpg">Afbeelding 1</option>
<option value="images/image2.jpg">Afbeelding 2</option>
<option value="images/image3.jpg">Afbeelding 3</option>
</select>
<img src="images/image.jpg" alt="Afbeelding" />
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
$('#option').change(function() {
var value = $(this).val();
$('#image img').hide();
$('#image .' + value).show();
});
</script>
<select name="option" id="option">
<option value="image">Afbeelding</option>
<option value="image1">Afbeelding 1</option>
<option value="image2">Afbeelding 2</option>
<option value="image3">Afbeelding 3</option>
</select>
<div id="image">
<img src="images/image.jpg" alt="Afbeelding" class="image">
<img src="images/image1.jpg" alt="Afbeelding 1" class="image1">
<img src="images/image2.jpg" alt="Afbeelding 2" class="image2">
<img src="images/image3.jpg" alt="Afbeelding 3" class="image3">
</div>
$('#option').change(function() {
var value = $(this).val();
$('#image img').hide();
$('#image .' + value).show();
});
</script>
<select name="option" id="option">
<option value="image">Afbeelding</option>
<option value="image1">Afbeelding 1</option>
<option value="image2">Afbeelding 2</option>
<option value="image3">Afbeelding 3</option>
</select>
<div id="image">
<img src="images/image.jpg" alt="Afbeelding" class="image">
<img src="images/image1.jpg" alt="Afbeelding 1" class="image1">
<img src="images/image2.jpg" alt="Afbeelding 2" class="image2">
<img src="images/image3.jpg" alt="Afbeelding 3" class="image3">
</div>
Je kunt het op allerlei manieren doen via javascript (Deze scripts zijn niet getest).
Als je het via php doet kijk je gewoon naar de $_POST van de select.