Javascript <select> toevoegen

[larsojo]

Hallo allemaal,

Ik heb een PB systeempje waarbij ik een bericht naar meerdere gebruikers wil sturen. Nu lijkt het mij mooi om een <select> systeem te hebben met als je 1 ontvanger selecteert dat er dan nog een <select> bij komt voor een 2e ontvanger, enz.

Hoe doe ik dit met Javascript??

Mvg Larsojo

 

[lord4163]

Door gebruik te maken van Google vind je dit:
http://www.dreamincode.net/forums/topic/25737-if-option-selected/ (Zie derde antwoord).

Om iets te verbergen maak ik gebruik van deze jQuery functie:
http://api.jquery.com/show/

 

[larsojo]

Maar hoe kan ik een <select> tag aanmaken?

 

[lord4163]

Je hoeft niks te maken, dat kan natuurlijk wel, maar ik zou hem gewoon show'en en hide'en.

 

[larsojo]

Nee ik wil een nieuwe select maken zodat ik een nieuwe ontvanger kan toevoegen

 

[lord4163]

Dat kan geloof ik met InnerHTML.

 

[larsojo]

En hoe doe ik dit?

 

[lord4163]

Bij mij doet Google het gewoon hoor?

https://developer.mozilla.org/en-US/docs/DOM/document.createElement

 

[csshunter]

Google heeft de innerHTML vergeten.

Maar ik zie de bedoeling nog niet helemaal voor me:

• "... als je 1 ontvanger selecteert dat er dan nog een <select> bij komt voor een 2e ontvanger, enz."

Een <select> betekent een uitrolvakje met een lijstje.
Dus:

• Er is een uitrolvakje met bv. Jan, Boris, Ahmed, Sasha en Willemien.
• Je selecteert bv. Boris. Klik!
• Dan komt er automatisch een nieuw uitrolvakje voor de 2e ontvanger. Daar moet dus in staan: Jan, Ahmed, Sasha en Willemien.
• Je selecteert bv. Ahmed. Klik!
• Dan komt er automatisch een nieuw uitrolvakje voor de 3e ontvanger. Daar moet dus in staan: Jan, Sasha en Willemien.
• Enz.

Zoiets zou je met javascript kunnen fabrieken, maar het lijkt me als gebruiker wat onhandig in te vullen. Je moet telkens een nieuw uitrolvakje openklappen, en daarin eventueel naar beneden scrollen voor de juiste naam.

Kan je dan niet beter een vinkjes-systeem nemen?

<form method="..." action="...">
    <p>Wie moeten dit ontvangen?</p>
    <p>
       <input type="checkbox" name="ontvanger" value="Jan" />Jan<br />
       <input type="checkbox" name="ontvanger" value="Boris" />Boris<br />
       <input type="checkbox" name="ontvanger" value="Ahmed" />Ahmed<br />
       <input type="checkbox" name="ontvanger" value="Sasha" />Sasha<br />
       <input type="checkbox" name="ontvanger" value="Willemien" />Willemien<br />
       <input type="submit" value="Verzenden" />
    </p>
</form>

Zo heb je meteen het overzicht, en je kan bliksemsnel de vinkjes vinken.

Met vriendelijke groet,
CSShunter

 

[larsojo]

mooooi

Alleen als ik het test en ik klik iedereen aan, krijg ik alleen Willemien te zien. Hoe los ik dit op?

 

[csshunter]

Hoi larsojo,
Mijn fout!

• Ze hebben allemaal dezelfde (groeps-)name, wat alleen nodig is voor radio-buttons: dan moet je echt kiezen en komt er maar 1 antwoord uit voor de hele groep.
• Bij een checkbox zijn meerdere antwoorden mogelijk, dus daar hebben ze allemaal een andere name="..." nodig.

Zie ook dit topic voor voorbeeldjes van alle twee (waarin ook de mogelijkheid van een vervolgvraag zit).

Met vriendelijke groet,
CSShunter

 

[larsojo]

Hoi larsojo,
Mijn fout!

• Ze hebben allemaal dezelfde (groeps-)name, wat alleen nodig is voor radio-buttons: dan moet je echt kiezen en komt er maar 1 antwoord uit voor de hele groep.
• Bij een checkbox zijn meerdere antwoorden mogelijk, dus daar hebben ze allemaal een andere name="..." nodig.

Zie ook dit topic voor voorbeeldjes van alle twee (waarin ook de mogelijkheid van een vervolgvraag zit).

Met vriendelijke groet,
CSShunter

Ik heb nu ook gebruik kunnen maken van:

<form>
<input type="checkbox" name="ontvanger[]" value="1" />1
<input type="checkbox" name="ontvanger[]" value="2" />2
<input type="checkbox" name="ontvanger[]" value="3" />3

<?php
foreach($_POST['ontvanger'] as $ontvanger) {
	$ontvanger = $ontvanger.', ';
}

?>

Op deze manier is het gereed om de Database in te gaan en het daarna er weer uit te lezen.



IEDEREEN BEDANKT!!!!!!!!
(Btw ik ben morgen 15 )

 

[csshunter]

<offtopic>
Gefeliciteerd! :thumb:

</offtopic>