[JavaScript/HTML] Jump menu moet andere menu openen.

[Verwijderd]

De vraag is niet erg moeilijk denk ik:

Stukje code:

<td><select name="voorstelling" id="voorstelling" onChange="">

<option>Beauty and the Beast</option>
<option>Birgitte Kaandorp</option>
<option>One Night of Queen</option>
<option>The Nits</option>
<option>Soweto Gospel Choir</option>
<option>Annie</option>

</select></td>


Ik wil dus dat dit Jump menu een ander Jump menu opent. Als ik bijv Annie selecteer dan wil ik dat het andere jump menu de tijden laat zien. Maar die tijden moeten dus bij elke voorstelling anders zijn.

Ik denk dat het met javascript moet, en dan met onChange maar ik heb geen idee wat ik neer moet zetten.

EDIT: Ik zie net dat dit topic (zoals normaal) niet hier thuis hoort maar bij Webdesing (wat totaal niet klopt, maar daar ga ik niet over in discussie). Kan iemand dit verplaatsen/weghalen?

[ Voor 23% gewijzigd door Verwijderd op 14-10-2005 18:50 ]

[RobIII]

Het heet geen jump-menu maar een dropdown of een select box. Dat googled al handiger

En als je nou wat code post (en dan tussen [code] tags) met meer dan alleen die dropdown dan kunnen we misschien wat meer erover zeggen. Als je ook even aan wil geven wat je zelf al geprobeerd hebt krijg je misschien ook nog wel hulp bij wat je verkeerd doet

Verwijderd schreef op vrijdag 14 oktober 2005 @ 18:49:
EDIT: Ik zie net dat dit topic (zoals normaal) niet hier thuis hoort maar bij Webdesing (wat totaal niet klopt, maar daar ga ik niet over in discussie). Kan iemand dit verplaatsen/weghalen?

Doe maar een TR dan

En kijk anders hier effe (1e hit)

[ Voor 105% gewijzigd door RobIII op 14-10-2005 19:00 ]

[Verwijderd]

ik heb ff gestuurd...thx voor de info.

Zoekt idd lang als je o p de verkeerde naam zoekt

Vreemd, ik probeerde net de [code] maar dat werkte dus niet...

Naja, bedankt in iedergeval

En wat ik geprobeerd heb: Nog niks! Geen idee waar ik moet beginnen! Maar dat google gaat wel helpen. Ben toch blij dat ik hier gepost heb, anders wist ik het over een jaar nog niet

[ Voor 33% gewijzigd door Verwijderd op 14-10-2005 19:02 ]

[RobIII]

Verwijderd schreef op vrijdag 14 oktober 2005 @ 19:01:
Vreemd, ik probeerde net de [code] maar dat werkte dus niet...

Ech wel

[code]
Hier je code
[/]

Moet werken...

Verwijderd schreef op vrijdag 14 oktober 2005 @ 19:01:
En wat ik geprobeerd heb: Nog niks! Geen idee waar ik moet beginnen! Maar dat google gaat wel helpen. Ben toch blij dat ik hier gepost heb, anders wist ik het over een jaar nog niet

De juiste zoektermen helpen inderdaad vaak al meteen. Maar hoe kom jij dan bij "jump menu"?

[ Voor 47% gewijzigd door RobIII op 14-10-2005 19:04 ]

[crisp]

--> W&G

simpel voorbeeld:

HTML:

<script type="text/javascript">

var options = [];
options['annie'] = ['12:00', '13:00', '14:00'];
options['beauty'] =  ['15:00', '16:00', '18:00'];

function changeoptions(select, targetselectid)
{
    var targetselect = document.getElementById(targetselectid);
    targetselect.options.length = 0;
    var selectedvalue = select.options[select.selectedIndex].value;
    if (selectedvalue && options[selectedvalue])
    {
        var selectoptions = options[selectedvalue];
        targetselect.options[0] = new Option('Kies een tijd', '');
        for (var i = 0; i < selectoptions.length; i++)
        {
            targetselect.options[i+1] = new Option(selectoptions[i], selectoptions[i]);
        }
    }
}

</script>
<select name="voorstelling" onchange="changeoptions(this, 'tijd')">
    <option value="">Kies een voorstelling</option>
    <option value="annie">Annie</option>
    <option value="beauty">Beauty and the Beast</option>
</select>
<select name="tijd" id="tijd"></select>

[Verwijderd]

crisp schreef op vrijdag 14 oktober 2005 @ 19:35:
--> W&G

simpel voorbeeld:

HTML:

<script type="text/javascript">

var options = [];
options['annie'] = ['12:00', '13:00', '14:00'];
options['beauty'] =  ['15:00', '16:00', '18:00'];

function changeoptions(select, targetselectid)
{
    var targetselect = document.getElementById(targetselectid);
    targetselect.options.length = 0;
    var selectedvalue = select.options[select.selectedIndex].value;
    if (selectedvalue && options[selectedvalue])
    {
        var selectoptions = options[selectedvalue];
        targetselect.options[0] = new Option('Kies een tijd', '');
        for (var i = 0; i < selectoptions.length; i++)
        {
            targetselect.options[i+1] = new Option(selectoptions[i], selectoptions[i]);
        }
    }
}

</script>
<select name="voorstelling" onchange="changeoptions(this, 'tijd')">
    <option value="">Kies een voorstelling</option>
    <option value="annie">Annie</option>
    <option value="beauty">Beauty and the Beast</option>
</select>
<select name="tijd" id="tijd"></select>

Noem het maar simpel, ik snap er weinig van

Bedankt! Ga het straks in mijn site zetten!

[2_05]

Doet me heel erg denken aan een site die ik aan het bouwen ben, klik, misschien dat je iets aan de broncode hebt.

Als je in de eerste select-box een keuze maakt, veranderd aan de hand daarvan de keuze die je in het 2e select menu kan maken, heb je die gemaakt, dan veranderd daarna de keuze die je in het 3e select vak kan maken.

(Omdat het zo verschikkelijk veel keuzes waren heb ik het wel een beetje ingewikkelder gemaakt om de pagina klein te houden)

[Verwijderd]

De code werkt perfect.

Nog één vraagje:

Ik heb een pagina van bijv: Annie, en daar staat op "bestel kaarten" als je daar nu op klikt krijgt je gewoon de kaartverkoopt scherm te zien.

Ik wil dus dat het kaartverkoopt scherm gelijk Annie laat zien in de eerste dropdown box.

Wat is de code hiervoor?

Ik gebruik de code van Crips.

[Verwijderd]

Een andere vraag, ik wil dat er nog een dropdown menu veranderd. Hoe moet ik dat invoegen? In dat dropdown menu moet de "prijs" worden aangegeven.

[crisp]

Verwijderd schreef op zondag 16 oktober 2005 @ 20:28:
Een andere vraag, ik wil dat er nog een dropdown menu veranderd. Hoe moet ik dat invoegen? In dat dropdown menu moet de "prijs" worden aangegeven.

Kan je de prijs ook kiezen dan?
Maar probeer eerst eens mijn code te begrijpen, wellicht dat je dan aanknopingspunten vind om de rest zelf op te lossen

[Verwijderd]

code:

<script language="JavaScript" type="text/JavaScript">

var options = [];
options['Annie'] = ['28/10/05 om 12:00', '31/10/05 om 13:00', '5/11/05 14:00'];
options['Beauty and the Beast'] =  ['26/10/05 om 15:30', '27/10/05 om 16:00'];
options['Birgitte Kaandorp'] =  ['29/10/05 om 14:00', '12/11/05 om 18:00', '3/11/05 om 18:00'];
options['One Night of Queen'] =  ['14/11/05 om 16:00', '17/11/05 om 18:30', '8/11/05 om 20:30'];
options['The Nits'] =  ['10/11/05 om 15:00', '12/11/05 om 19:30', '12/11/05 om 21:00'];
options['Soweto Gospel Choir'] =  ['11/11/05 om 20:00', '12/11/05 om 20:00'];

function changeoptions(select, targetselectid)
{
    var targetselect = document.getElementById(targetselectid);
    targetselect.options.length = 0;
    var selectedvalue = select.options[select.selectedIndex].value;
    if (selectedvalue && options[selectedvalue])
    {
        var selectoptions = options[selectedvalue];
        targetselect.options[0] = new Option('Kies een tijd', '');
        for (var i = 0; i < selectoptions.length; i++)
        {
            targetselect.options[i+1] = new Option(selectoptions[i], selectoptions[i]);
        }
    }
}



</script>
</head>

<body>
<br>
<form name="form1" method="post" action="http://www.sterest_final_ier_final.php">
  <table  border="0" width="420">
    <tr>
      <td width="162"><p class="style2">Voorstelling: </p></td>
      <td width="111"><span class="style2">Matinee:</span></td>
      <td width="133"><span class="style2">Aantal Kaartjes: </span></td>
    </tr>
    <tr>
      <td><select name="voorstelling" onchange="changeoptions(this, 'tijd')">
          <option selected>Kies Voorstelling</option>
          <option value="Beauty and the Beast">Beauty and the Beast</option>
          <option value="Birgitte Kaandorp">Birgitte Kaandorp</option>
          <option value="One Night of Queen">One Night of Queen</option>
          <option value="The Nits">The Nits</option>
          <option value="Soweto Gospel Choir">Soweto Gospel Choir</option>
          <option value="Annie">Annie</option>
      </select></td>
      <td width="111"><select name="datum" id="tijd">
      <option selected>Matinee</option>
      </select>
      </td>
      <td width="133"><select name="kaartjes" id="select2">  
          <option selected>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
      </select></td>
    <tr>
      <td><span class="style2">Rang:</span></td>
    </tr>
    <tr>
      <td><select name="rang" id="select3">
          <option selected>De rang</option>
          <option>1e rang</option>
          <option>2e rang</option>
          <option>3e rang</option>
          <option>4e rang</option>
          <option>Buiten Ring</option>
      </select></td>

Het is gelukt! Check hier boven maar

Zoals je kan zien werkt dat met het selecteren van een voorstelling een tijd word weer gegeven.

Nu zou het mooi zijn als ook bij de dropdown menu "rang". Dat daar de rang word weergegeven.
Ik heb alleen geen die hoe ik dat moet doen.

[Verwijderd]

Ik heb al veel geprobeerd maar dat je de prijzen kan kiezen werkt nog niet

Kan iemand (Crisp) kan jij mij helpen...

[crisp]

Hoe bedoel je precies 'de prijzen kiezen'? Ik neem aan dat je bedoelt dat je de prijs wil bereken en tonen? Zo ja, dan is het ook wel handig om te weten waar de prijzen van afhankelijk zijn

[Verwijderd]

crisp schreef op maandag 17 oktober 2005 @ 22:26:
Hoe bedoel je precies 'de prijzen kiezen'? Ik neem aan dat je bedoelt dat je de prijs wil bereken en tonen? Zo ja, dan is het ook wel handig om te weten waar de prijzen van afhankelijk zijn

Het is niet de prijs maar meer de rang.

Zoals je in mijn vorige post kon zien (de code) is het nu zo dat de voorstelling word geselecteerd dat de tijd dat veranderd. Dit werkt erg goed, alleen wil ik nu ook nog dat de rang veranderd. Deze rang zit ook in een dropdown menu. Ik wil dus dat als je op de voorstelling klikt dat dan de tijd ÉN de rang veranderd.

[2_05]

Als je naar mijn eerder genoemde broncode kijkt, zie je dat door het aanroepen van functie select_chapter, na het uitvoeren hiervan ook select_paragraph wordt aangeroepen.

Dus doe iets als:

JavaScript:

function voorstelling_geselecteerd(){
//pas de tijden aan
tijd_geselecteerd()
}

function tijden_geselecteerd(){
//pas de rangen aan
rang_geselecteerd()
}

function rang_geselecteerd(){
//pas de prijs aan
}

//<select name="voorstelling" onchange="voorstelling_geselecteerd()">
//<select name="tijd" onchange="tijd_geselecteerd()">
//<select name="rang" onchange="rang_geselecteerd()">

Ik denk dat het wel moet lukken dit toe te passen in het voorbeeld van Crisp

[Verwijderd]

code:

<script language="JavaScript" type="text/JavaScript">

var options = [];
options['Annie'] = ['28/10/05 om 12:00', '31/10/05 om 13:00', '5/11/05 14:00'];
options['Beauty and the Beast'] =  ['26/10/05 om 15:30', '27/10/05 om 16:00'];
options['Birgitte Kaandorp'] =  ['29/10/05 om 14:00', '12/11/05 om 18:00', '3/11/05 om 18:00'];
options['One Night of Queen'] =  ['14/11/05 om 16:00', '17/11/05 om 18:30', '8/11/05 om 20:30'];
options['The Nits'] =  ['10/11/05 om 15:00', '12/11/05 om 19:30', '12/11/05 om 21:00'];
options['Soweto Gospel Choir'] =  ['11/11/05 om 20:00', '12/11/05 om 20:00'];

function rang_geselecteerd(select, targetselectid)
{
    var targetselect = document.getElementById(targetselectid);
    targetselect.options.length = 0;
    var selectedvalue = select.options[select.selectedIndex].value;
    if (selectedvalue && options[selectedvalue])
    {
        var selectoptions = options[selectedvalue];
        targetselect.options[0] = new Option('Kies een tijd', '');
        for (var i = 0; i < selectoptions.length; i++)
        {
            targetselect.options[i+1] = new Option(selectoptions[i], selectoptions[i]);
        }
    }
}



</script>

<select name="rang" id="rang" onchange="rang_geselecteerd(this, 'rang')">
          <option selected>De rang</option>
      </select>

Dit heb ik nu, alleen werkt dit niet.

Deze code stond er al :

code:

function changeoptions(select, targetselectid)
{
    var targetselect = document.getElementById(targetselectid);
    targetselect.options.length = 0;
    var selectedvalue = select.options[select.selectedIndex].value;
    if (selectedvalue && options[selectedvalue])
    {
        var selectoptions = options[selectedvalue];
        targetselect.options[0] = new Option('Kies een tijd', '');
        for (var i = 0; i < selectoptions.length; i++)
        {
            targetselect.options[i+1] = new Option(selectoptions[i], selectoptions[i]);
        }
    }
}

<select name="voorstelling" onchange="changeoptions(this, 'tijd')">
          <option selected>Kies Voorstelling</option>
          <option value="Beauty and the Beast">Beauty and the Beast</option>
          <option value="Birgitte Kaandorp">Birgitte Kaandorp</option>
          <option value="One Night of Queen">One Night of Queen</option>
          <option value="The Nits">The Nits</option>
          <option value="Soweto Gospel Choir">Soweto Gospel Choir</option>
          <option value="Annie">Annie</option>
      </select>

<select name="datum" id="tijd">
      <option selected>Matinee</option>
      </select>

Alleen doet die het dus niet. De nieuwe code (de eerste die ik in de post maak). Kan iemand mij uitleggen waar het moet.

[Verwijderd]

2_05 schreef op dinsdag 18 oktober 2005 @ 16:11:
Als je naar mijn eerder genoemde broncode kijkt, zie je dat door het aanroepen van functie select_chapter, na het uitvoeren hiervan ook select_paragraph wordt aangeroepen.

Dus doe iets als:

JavaScript:

function voorstelling_geselecteerd(){
//pas de tijden aan
tijd_geselecteerd()
}

function tijden_geselecteerd(){
//pas de rangen aan
rang_geselecteerd()
}

function rang_geselecteerd(){
//pas de prijs aan
}

//<select name="voorstelling" onchange="voorstelling_geselecteerd()">
//<select name="tijd" onchange="tijd_geselecteerd()">
//<select name="rang" onchange="rang_geselecteerd()">

Ik denk dat het wel moet lukken dit toe te passen in het voorbeeld van Crisp

het is dus niet gelukt, het is misschien veel gevraagd, maar zou iemand een script kunnen maken voor mij? Zelf kom ik er echt niet uit namelijk.

En wat moet er nou precies gebeuren??
Als ik bijv: voorstelling "Annie" selecteer dan moet de tijd veranderen (een keuze uit 4 verschillende tijden) én de rang moet veranderen (keuze tussen 1, 2 ,3 en 4).

[ Voor 6% gewijzigd door Verwijderd op 19-10-2005 14:53 ]

[2_05]

Heb mijn code voor je versimpeld en hier en daar angepast, mijn termen staan er nog wel in maar ik denk dat dit ongeveer wel is wat je wilt. Ook zou je in staat moeten zijn dit naar alle lust voor je eigen functies aan te passen, anders zou ik nog maar even een js-cursus volgen. De code zoals hieronder werkt, dus gewoon een beetje puzzelen totdat die doet wat je precies wilt. Deze code is wel totaal anders dan die van crisp omdat ik totaal niet op de zijne gelet heb, sorry daarvoor. In principe gewoon de menu´s die je erbij wilt aan select_menu array toevoegen en hij zou moeten blijven werken.

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Calculus Antwoorden</title>

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<SCRIPT type="text/javascript">
<!--

var select_menu= new Array();
select_menu[1]= new Array();
select_menu[2]= new Array();
select_menu[1][1]='<select name="number" TABINDEX="3" onChange="select_number()"><option value="HS">Rang</option><option value="1">Rang 1</option><option value="2">Rang 2</option><option value="3">Rang 3</option></select>';
select_menu[1][2]='<select name="number" TABINDEX="3" onChange="select_number()"><option value="HS">Rang</option><option value="1">Rang 1</option></select>';
select_menu[1][3]='<select name="number" TABINDEX="3" onChange="select_number()"><option value="HS">Exercise</option><option value="1">Rang 1</option><option value="2">Rang 2</option><option value="3">Rang 3</option><option value="4">Rang 4</option></select>';
select_menu[1][0]='<select name="paragraph" TABINDEX="2" onChange="select_paragraph()"><option value="PG">Tijd</option><option value="1">Tijd 1</option><option value="2">Tijd 2</option><option value="3">Tijd 3</option></select>';
select_menu[2][1]='<select name="number" TABINDEX="3" onChange="select_number()"><option value="HS">Rang</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="R">Review</option><option value="C">Challenging</option></select>';
select_menu[2][2]='<select name="number" TABINDEX="3" onChange="select_number()"><option value="HS">Rang</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="R">Review</option><option value="C">Challenging</option></select>';
select_menu[2][0]='<select name="paragraph" TABINDEX="2" onChange="select_paragraph()"><option value="PG">Tijd</option><option value="1">Tijd 1</option><option value="2">Tijd 2</option></select>';


function select_chapter(){
  if(document.forms['calculus'].elements['chapter'].value!="HS"){
    document.getElementById("paragraaf").innerHTML = select_menu[document.forms['calculus'].elements['chapter'].value][0];
  }
  else{document.getElementById("paragraaf").innerHTML = '<select name="paragraph" TABINDEX="2" disabled="true"> <option value="PG">Paragraph</option> </select>';
  }

select_paragraph();

}

function select_paragraph(){
  if(document.forms['calculus'].elements['paragraph'].value!="PG" && document.forms['calculus'].elements['chapter'].value!="HS"){
    document.getElementById("nummer").innerHTML = select_menu[document.forms['calculus'].elements['chapter'].value][document.forms['calculus'].elements['paragraph'].value];

    document.forms['calculus'].elements['number'].disabled=false;
    document.forms['calculus'].elements['send form'].disabled=false;
  }
  else{
    document.forms['calculus'].elements['number'].disabled=true;
    document.forms['calculus'].elements['send form'].disabled=true;
  }
  select_number()
}

function select_number(){
  if(document.forms['calculus'].elements['paragraph'].value!="PG" && document.forms['calculus'].elements['chapter'].value!="HS" && document.forms['calculus'].elements['number'].value!="HS"){
    document.forms['calculus'].elements['send form'].disabled=false;
  }
  else{

    document.forms['calculus'].elements['send form'].disabled=true;
  }
}






//-->
</SCRIPT>

</head>



<body bgcolor="#F9F9F9">

<form  name="calculus" action="selecter.php" target=main method="POST">


  <table width="600" border="0" cellspacing="0" cellpadding="0" class="FormCSS">

    <tr>
      <td colspan="3" align="center">
      <NOBR>

<span>
        <select name="chapter" TABINDEX="1" onChange="select_chapter()">
            <option value="HS" selected>Voorstelling</option>
            <option value="1"> Annie </option>
            <option value="2"> Klaas </option>
        </select>
</span>

<span id="paragraaf">
        <select name="paragraph" TABINDEX="2">

        </select>
</span> &nbsp <span id="nummer">

        <select name="number" TABINDEX="3">
            <option value="OG" selected> Exercise/Page</option>

        </select>

</span>
        <p></NOBR></div>
        </td>
      </tr>    
        <tr>
          <td><div align="center">
        <input type="submit" name="send form" value="Answer"  TABINDEX="5">
        </div></td>
    </tr>
            
           
            </div>
<SCRIPT type="text/javascript">
<!--
select_chapter()
//-->
</SCRIPT>

    </table>
  </div>
</form>
</body>

</html>

[ Voor 27% gewijzigd door 2_05 op 19-10-2005 20:27 ]