[HTML] in option eigen text toevoegen

[baziel]

Hoi,

ik wil graag een lijstje met options bouwen waarbij ik eerst een setje options uit een databaseje haal, en als laatste de mogelijkheid bied om zelf wat in te tikken (als de optie er nog niet is zeg maar)

het halen van waardes uit de database en daar een option van maken is allemaal zo lastig niet, het toevoegen van nieuwe waardes lukt me ook prima, maar het toe laten voegen van een nieuwe waarde als option krijg ik niet voor elkaar.
mijn idee was dat ik iets zou moeten kunnen doen als

code:

<SELECT NAME="lievelingskleur">
     <OPTION> rood </OPTION>
     <OPTION> zwart </OPTION>
     <OPTION><INPUT TYPE="text" MAXLENGTH="50" NAME="lievelingskleur"></OPTION>
</SELECT>

maar dat wil niet. Iemand een idee hoe ik dat voor elkaar zou kunnen krijgen?

Bedankt!

[Zoefff]

Dat kan niet binnen de selectbox zelf, je zal daarvoor gewoon een input onder of naast de select moeten zetten, waar mensen iets in kunnen vullen. Vervolgens voeg je die waarden met PHP aan de database, of met Javascript direct aan de select toe

[baziel]

Ha Zoefff,

daar was ik al bang voor. 'k vind het alleen zo jammer van je layout dat je eigenlijk 2 vakjes hebt die ongeveer hetzelfde doen, het leek me netter en duidelijker om daar 1 vakje van te maken.

maar als 2 moet draait de wereld vast ook wel door denk ik

[JHS]

Je zou het met javascript op zich nog wel zo kunnen regelen dat pas als <option>Iets anders</option> geselecteerd is de tekstbox verschijnt .

[XWB]

Zoek je zoiets?

JavaScript:

<script language="javascript" type="text/javascript">
function voegToe(value)
{
    if (value == 0)
    {
        var element = document.createElement('input');
        var button = document.createElement('input');
        element.type = 'text';
        element.id = 'newOption';
        button.type = 'button';
        button.value = 'Voeg toe';
        button.onclick = function() {
            var option = document.createElement('option');
            option.value = 'blaat';
            option.text = document.getElementById('newOption').value;
            document.getElementById('waarden').appendChild(option);
        }
        document.getElementById('box').appendChild(element);
        document.getElementById('box').appendChild(button);
    }
}
</script>
<select id="waarden" onchange="voegToe(this.value);">
    <option value="1">Waarde 1 uit DB</option>
    <option value="2">Waarde 2 uit DB</option>
    <option value="3">Waarde 3 uit DB</option>
    <option value="0">Iets anders</option>
</select>
<span id="box"></span>

Niet getest in IE overigens.

[ Voor 21% gewijzigd door XWB op 25-03-2006 15:29 ]

[baziel]

Hacku, je bent een held !
Prachtig mooi !

ik heb 1 klein dingetje moeten veranderen, voor de volledigheid voor eventuele anderen met deze vraag geef ik dat even:

code:

            option.value = 'blaat';
            option.text = document.getElementById('newOption').value;

heb ik veranderd in

code:

            option.value = document.getElementById('newOption').value;
            option.text = document.getElementById('newOption').value;
            option.defaultSelected=true;
            option.selected=true;

omdat ik anders in php met $_POST['waarden'] 'blaat' meekreeg in plaats van 'Waarde 4 uit DB' of zo en zo selecteert ie 'm meteen mooi.
Ik moest ook nog een Name= meegeven aan het select statement om de boel doorgegeven te krijgen.

Hartelijk bedankt!

[ Voor 24% gewijzigd door baziel op 25-03-2006 20:07 . Reden: nu nog mooi meegegeven dat ie geselecteerd staat :-) ]

[XWB]

Ik moest ook nog een Name= meegeven aan het select statement om de boel doorgegeven te krijgen.

Yep, was ik vergeten, maar dat wist je ook wel Als je het trouwens wat gebruiksvriendelijker wil hebben, kan je achter:

JavaScript:

document.getElementById('box').appendChild(element);

het volgende zetten:

JavaScript:

document.getElementById('newOption').focus();

Dan krijgt dat tekstveld direct de focus.