Dropdown optie, show text

Door Tom aan t Goor op 09-08-2012 14:44

1.046 views

Ik heb een aantal dropdown menu's

<form method="post">
<select name="land">
<option value="--">---</option>
<option value="Lanzarote">Lanzarote</option>
<option value="Nederland">Nederland</option>
<option value="Spanje">Spanje</option>
</select>

<select name="lanz">
<option value="Playablanca">Playa blanca</option>
<option value="Elgolfo">El golfo</option>
</select>

<select name="nede">
<option value="Amsterdam">Amsterdam</option>
<option value="Zaandam">Zaandam</option>
</select>

<select name="span">
<option value="Madrid">Madrid</option>
<option value="Salamanca">Salamanca</option>
</select>
</form>

Nu heb ik een aparte voor Nederland, Lanzarote en Spanje.
Maar, is het nu ook mogelijk dat je pas de dropdown menu van een land ziet, als je het des betreffende land ook bij het eerste dropdown menu hebt geselecteerd, en dat je hem anders niet ziet?

Ik heb wat tutorials hier over opgezocht, maar het lukt me helaas niet.
Kan iemand me hiermee helpen, of heeft iemand hier een tutorial over?

[size=xsmall]Toevoeging op 09/08/2012 15:19:33:[/size]

Ik heb nu wat anders geprobeerd, maar dit werkt ook niet, ziet iemand waarom niet?

<html>
<head>

<script type="text/javascript">
function toggleSelect(id)
{	
	document.getElementById('---').style['display'] = 'none';
	document.getElementById('lan-campus').style['display'] = 'none';
	document.getElementById('ned-campus').style['display'] = 'none';
	switch(id)
	{
		case lan:
		document.getElementById('lan-campus').style['display'] = 'block';
		break;
		case ned:
		document.getElementById('ned-campus').style['display'] = 'block';
		break;
	}
	
	
	
    
}
</script>
</head>
<body>

<input type='radio' name='campustype' value='lan' onclick="toggleSelect('lan');" /><label for='lancampus'>Lanzarote</label><br />

<input type='radio' name='campustype' value='ned' onclick="toggleSelect('ned');" /><label for='nedcampus'>Nederland</label>
<br />
<select id='---'>
<option>---</option>
</select>

<select id='lan-campus' style='display: none;'>
<option>Playa blanca</option>
</select>

<select id='ned-campus' style='display: none;'>
<option>Amsterdam</option>
</select>

</body>
</html>

Marco PHPJunky

09-08-2012 18:00

Dit is nu even echt een heel simpel voorbeeld hoe het eventueel zou kunnen.
Dit voorbeeld is wat langer / simpeler uitgeschreven zodat je goed kan zien wat er allemaal gebeurd en hoe het werkt..
(het is een opzetje maar er kan nog vele malen meer mee en beter)


<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <title>test dropdown</title>
    <style>
    .not_show {
        display: none;
    }
    .do_show{

    }

    </style>
</head>
<script type="text/javascript">
    $(document).ready(function() {
            // Een trigger voor als er iets in de eerste selectbox verranderd...
            $('#test').change(function() {
                // Haalt de select input op van de eerste dropdown...
                var input_test = $('#test').val();
                // Shows what the input is... (Debug)...
                //alert(input_test);

                // kijkt of optie 3 gekozen is (in dit geval Nederland)
                if( input_test == 3) {
                    $('#show_dropdown_nl').removeClass('not_show').addClass('show');
                } else {
                    $('#show_dropdown_nl').removeClass('show').addClass('not_show');
                }
                // kijkt of optie 4 gekozen is (in dit geval Spanje)
                if( input_test == 4) {
                    $('#show_dropdown_esp').removeClass('not_show').addClass('show');
                } else {
                    $('#show_dropdown_esp').removeClass('show').addClass('not_show');
                }
                // kijkt of optie 5 gekozen is (in dit geval USA)
                if( input_test == 5) {
                    $('#show_dropdown_us').removeClass('not_show').addClass('show');
                } else {
                    $('#show_dropdown_us').removeClass('show').addClass('not_show');
                }

            });
        });
            
</script>
<body>
        <select name="test" id="test">
            <option value="1">Iets</option>
            <option value="2">bla</option>
            <option value="3">Nederland</option>
            <option value="4">Spanje</option>
            <option value="5">USA</option>
        </select>

        <div id="show_dropdown_nl" class="not_show">
            <select name="dutch" id="dutch">
                <option value="1">Utrecht</option>
                <option value="2">Limburg</option>
                <option value="3">Zeeland</option>
                <option value="4">Flevoland</option>
                <option value="5">Friesland</option>
            </select>
        </div>

        <div id="show_dropdown_esp" class="not_show">
            <select name="spain" id="spain">
                <option value="1">Madrid</option>
                <option value="2">Salamanca</option>
                <option value="3">Strand</option>
                <option value="4">Zon</option>
                <option value="5">Zee</option>
            </select>
        </div>

        <div id="show_dropdown_us" class="not_show">
            <select name="usa" id="usa">
                <option value="1">New York</option>
                <option value="2">Detriod</option>
                <option value="3">Florida</option>
                <option value="4">LA</option>
                <option value="5">Long</option>
            </select>
        </div>
</body>
</html>

Tom aan t Goor

09-08-2012 18:17

Bedankt, het is me nu gelukt.

Reageren

Inloggen om te reageren