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.