js werkt wel onder ie onder firefox niet

Status
Niet open voor verdere reacties.
M

migthy84

Gebruiker
Lid geworden
13 okt 2009
Berichten
580
Beste helpmijers.

Ik wil dynamisch opties toevoegen in een combobox

Code: 
html>
<body>
<script language="JavaScript">
    function add() {
        var newOption = document.createElement('<option value="TOYOTA">');
        document.all.mySelect.options.add(newOption);
        newOption.innerText = "Toyota";
    }
    function remove() {
        document.all.mySelect.options.remove(0);
    }
</script>
<select id="mySelect">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<input type="button" value="Add" onclick="add;">
<input type="button" value="Remove" onclick="remove;">
</body>
</html>

Nu gaat ie8.0 er zonder problemen mee overweg
terwijl firefox 3.5.3

elke keer var newOption = document.createElement('<option value="TOYOTA">');
fout melding 5.
iemand een oplossing er voor

het zit hem in de string variable maar uitsplitsen in
document.createElement('"");
newOption.setAttribute("value", "*");

heeft geen zin
 
Laatst bewerkt:
nee de oplossing zit er niet echt bij. Ik weet wel hoe een combobox maken , maar ik wel bij elke combobox een add,remove hebben. Die via een algemene functie verwijder kan worden.

zodra een van de knoppen aan geraakt worden moet de juiste combobox gevuld worden.

statisch gezien kan dit door
Code: 
 var newOption = document.createElement("<option = "textfield.value" >");
//ervan uit gaan dat CName de combobox naam is

document.all.Cname.options.add(newOption);
newOption.innerText = texfield.value

nu wil er dus voor zorgen dat CName , dynamische.

optie 1. een function die weet welk knop er in gedrukt
optie 2. Minst waarschijnlijk doorgeven van document variabel
optie 3. Object aanmaken die het combobox overschrijft
 
Laatst bewerkt:
migthy84 zei:
nee de oplossing zit er niet echt bij. Ik weet wel hoe een combobox maken , maar ik wel bij elke combobox een add,remove hebben. Die via een algemene functie verwijder kan worden.

zodra een van de knoppen aan geraakt worden moet de juiste combobox gevuld worden.

statisch gezien kan dit door
Code: 
 var newOption = document.createElement("<option = "textfield.value" >");
//ervan uit gaan dat CName de combobox naam is

document.all.Cname.options.add(newOption);
newOption.innerText = texfield.value

nu wil er dus voor zorgen dat CName , dynamische.

optie 1. een function die weet welk knop er in gedrukt
optie 2. Minst waarschijnlijk doorgeven van document variabel
optie 3. Object aanmaken die het combobox overschrijft
Klik om te vergroten...

Ik heb een script geschreven voor je ;)
HTML: 
<html>
<head>
<title>
TEST
</title>

<script type="text/javascript">   
function add() 
	{
	    var value = textfield.value;
        Cname.options[Cname.options.length] = new Option(value,value);
    }

function remove() 
	{
	    var combobox = document.getElementById("Cname")
        combobox.remove(combobox.selectedIndex)
    }
</script>

</head>
<body>

    <input id="textfield" name="textfield" type="text" size="25" />
    
    <br />
    
    <select id="Cname" name="Cname">
        <option value="A" >A</option>
        <option value="B" >B</option>
        <option value="C" >C</option>
    </select>
    
    <input type="button" value="Add" onclick="add()" />
    <input type="button" value="Remove" onclick="remove()" />

</body>
</html>

er zaten wel veel fouten in en dingen die je mistte. dus die heb ik ook toegevoegd.
Byee VRC
 
Als je met Javascript gaat werken kun je beter een library nemen die alle verschillen tussen browsers wegmoffelt, zoals JQuery.

Kost even tijd om in te komen, maar dan ben je wel vrijwel geheel van dit soort dingen af.
 
@visha.

Bedankt je script. Mis nu alleen nog het doorgeven. Ik zie nog steeds dat he CName hard codeer. De bedoeling was de CName (comboboxnaam) generiek werken.

Zo dat het werkt voor knop 1 , 2 ,3 ,4. Het aantal comboboxen is pas bij inladen van de pagian bekent.
 
Hey migthy84,
als ik het dus goed begrijp heb je dus 4 knoppen en 1 combobox.
en als je op knop 1 drukt vult deze waardes die gekoppeld zijn aan knop 1.
knop 2 heeft andere waardes dus als je daarop klikt komen deze in de combobox.
enz...???

mocht ik het fout hebben zou je het dan (weer) willen uitleggen want dan snap ik het niet.

Byee VRC
 
visha zei:
Hey migthy84,
als ik het dus goed begrijp heb je dus 4 knoppen en 1 combobox.
en als je op knop 1 drukt vult deze waardes die gekoppeld zijn aan knop 1.
knop 2 heeft andere waardes dus als je daarop klikt komen deze in de combobox.
enz...???

mocht ik het fout hebben zou je het dan (weer) willen uitleggen want dan snap ik het niet.

Byee VRC
Klik om te vergroten...

Nee dat kan je doen om aan elke knop functie te hangen.

probleem stelling op nieuw :
Je hebt een array , deze levert een x aantal combobox op met inhoud..
Elke combobox heeft altijd 2 knoppen. add en remove.

omdat je nooit weet hoeveel comboboxen een pagina gaat hebben. Wil ik het liefst 1 functie waarmee je waarde kan toevoegen. Deze functie weet bij welke combobox een waarde toegevoegd dient te worden.

Zelf zit ik te denken om php dan maar on the fly javascript te generen(indien mogelijk) .
 
migthy84 zei:
Nee dat kan je doen om aan elke knop functie te hangen.

probleem stelling op nieuw :
Je hebt een array , deze levert een x aantal combobox op met inhoud..
Elke combobox heeft altijd 2 knoppen. add en remove.

omdat je nooit weet hoeveel comboboxen een pagina gaat hebben. Wil ik het liefst 1 functie waarmee je waarde kan toevoegen. Deze functie weet bij welke combobox een waarde toegevoegd dient te worden.

Zelf zit ik te denken om php dan maar on the fly javascript te generen(indien mogelijk) .
Klik om te vergroten...

Ik heb een script voor je geschreven. Deze werkt. deze bevat 3 comboxes met elke een add en remove button. je kan ze invoegen met de tekst via de textbox.
je moet een systeem bedenken hoe je de combobx, add en remove button aan elkaar gaat koppelen want het zijn als het ware groepen.
ik heb het op deze manier gedaan.

combobox id/naam = naam
add id/naam = 'add' + naam
remove id/naam = 'rem' + naam

wat ik dan vervolgens doe is ik geeft het object mee. op zich kan je hier al de naam filteren maar kvind het altijd netter als je het hele object meegeeft. en hiervan doe ik een substring op de string van de id waardoor je de naam van de combobox krijgt. vervolgens haal ik de juiste combobox op nu ik de juiste naam heb en kan het zo toevoegen of verwijderen.

Byee VRC

HTML: 
<html>
<head>
<title>
TEST
</title>
 
<script type="text/javascript">   
    function add(object) 
    {
        var value = document.getElementById("textfield").value;
        
        var comboboxName = object.id.substring(3);
        var combobox = document.getElementById(comboboxName);
        
        combobox.options[combobox.options.length] = new Option(value,value);
    }
 
    function remove(object) 
    {
        var comboboxName = object.id.substring(3);
        var combobox = document.getElementById(comboboxName);
        
        combobox.remove(combobox.selectedIndex)
    }
</script>
 
</head>
<body>
 
    <table>
        <tr>
            <td>
                <input id="textfield" name="textfield" type="text" size="25" />
            </td>
        </tr>

        <tr>
            <td>
                <select id="Select1" name="Select1" style="width:55mm">
                    <option value="A" >A</option>
                    <option value="B" >B</option>
                    <option value="C" >C</option>
                </select>
            </td>
            <td>
                <input id="addSelect1" name="addSelect1" type="button" value="Add" onclick="add(this)" />
            </td>
            <td>
                <input id="remSelect1" name="remSelect1" type="button" value="Remove" onclick="remove(this)" />
            </td>
        </tr>
        
        <tr>
            <td>
                 <select id="Select2" name="Select2" style="width:55mm">
                    <option value="D" >D</option>
                    <option value="E" >E</option>
                    <option value="F" >F</option>
                </select>
            </td>
            <td>
                <input id="addSelect2" name="addSelect2" type="button" value="Add" onclick="add(this)" />
            </td>
            <td>
                <input id="remSelect2" name="remSelect2" type="button" value="Remove" onclick="remove(this)" />
            </td>
        </tr>
        
        <tr>
            <td>         
                <select id="Select3" name="Select3" style="width:55mm">
                    <option value="G" >G</option>
                    <option value="H" >H</option>
                    <option value="I" >I</option>
                </select>
            </td>
            <td>
                <input id="addSelect3" name="addSelect3" type="button" value="Add" onclick="add(this)" />
            </td>
            <td>
                <input id="remSelect3" name="remSelect3" type="button" value="Remove" onclick="remove(this)" />
            </td>
        </tr>
    </table>
</body>
</html>
 
Laatst bewerkt:
Overgens is je createElement-idee niet helemaal verkeerd hoor, alleen de syntax:
[JS]document.createElement(elementType);[/JS]waar elementType een element-naam is, zoals a (link) of option voor een option.

Dus, hier wat code:
[JS]/* 100% DOM toevoegen van select-option: */

var nOption = document.createElement('option');

nOption.setAttribute('value', 'toyota');
nOption.innerHTML = 'toyota';

/* voeg nu toe aan je select */
document.getElementById('mijnSelectDing').appendChild(nOption);[/JS]


Als je met Javascript gaat werken kun je beter een library nemen die alle verschillen tussen browsers wegmoffelt, zoals JQuery.
Klik om te vergroten...
Niet helemaal mee eens, voor heeeeel veel scripts kan je ook gewoon GOEDE code schrijven, die in alle browsers van tegenwoordig werkt. Niet zo snel naar een jsLib grijpen voor dit soort simpele scriptjes. :)



:thumb:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan