Beste mededevelopers,

Ik heb momenteel een select.
Ik heb daaronder een table staan.
maar ik wil dat hij deze table alleen laat zien als iemand bij de select value=2 selecteert.


		<td>
			<select name='naar'>
				<option value='0'>-- Kies --</option>
				<option value='1'>Particulier</option>
				<option value='2'>Bedrijven</option>
				<option value='3'>Beide</option>
			</select>
		</td>


Ofterwel als iemand bedrijven selecteerd dat hij eronder een table laat zien met info

niet na een POST maar direct..

Weet iemand hoe dit moet?

Mvg,

Tim Kampherbeek
[google]AJAX request[/google].
Ik heb zelf absoluut geen verstand van ajax daarom vraag ik het ook.

Of iemand een voorbeeld dus heeft?

Wat gelijk staat aan mijn script

btw: geen submit eerst he,.,, gewoon iets selecteren en dat hij direct laat zien.

Bij voorbaart dank.

Mvg,

T. Kampherbeek
Hierbij een snel voorbeeldje met jquery library.


<?php // Is natuurlijk javascript, maar voor de kleurtjes php gebruikt
$(function(){
                $("#extra_veld").hide();
                // Veld met ID laten zien bij keuze 2
	$("#SelectId").change(function(){
		if($("#SelectId").val() == "2"){
			$("#extra_veld").show();
		}
		else{
			$("#extra_veld").hide();
		}
	});
});
?>
kunt u ook gebruiken hoe ik dit in mijn select en mijn divs kan gebruiken?

mvg,

T. kampherbeek
Kijk welke van de opties geselecteerd is, en voer de hide-show uit.
Hij werkt niet.

Of ik moet iets verkeerds doen.

Misschien voorbeeld hoe ik het erin moet plaatsen?
@Tim: Michel geeft aan dat die code voor Jquery is, dus je moet wel Jquery laden, misschien dat ie 't daarom niet doet?
http://jquery.com/
Mijn code werkt goed. Waarschijnlijk ben je vergeten de jquery library in te voegen. Hieronder een voorbeeldje zoals het helemaal zou moeten zijn (werkt bij mij)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#extra_veld").hide();
	// Veld met ID laten zien bij keuze 2
    $("#SelectId").change(function(){
        if($("#SelectId").val() == "2"){
            $("#extra_veld").show();
        }
        else{
            $("#extra_veld").hide();
        }
    });
});
</script>
</head>

<body>
<select name='naar' id="SelectId">
                <option value='0'>-- Kies --</option>
                <option value='1'>Particulier</option>
                <option value='2'>Bedrijven</option>
                <option value='3'>Beide</option>
            </select>
<div id="extra_veld">Dit is de extra div die tevoorschijn moet komen!</div>
</body>
</html>

Hartelijk dank,

Het werkt nu perfect en ik heb weer is wat geleerd.

Mvg,

T. Kampherbeek

Reageren