Hoe krijg ik text in een option list?

Status
Niet open voor verdere reacties.
T

Tijger81

Gebruiker
Lid geworden
2 jan 2010
Berichten
397
Hallo.

Ik probeer een option value te vullen met de inhoud van de tagname <name>

Hieronder staat wat ik heb tot nu toe:

Code: 
<button onclick="myFunction()">klik</button>

<name>a</name>
<name>b</name>

<select name="laag" id="layer">
	<option value=""></option>
</select>	

<script>
function myFunction() {
var x, i, txt;
txt = "";
    var x = document.getElementsByTagName("name");
	for (i = 1; i< x.length; i++) {
	txt += '<option>'
	txt += x[i].childNodes[0] + "</option>";
	 }  
    document.getElementById("layer").innerHTML = txt;
}
</script>

Maar het werkt niet. Ik krijg a en b niet als optie.

Wie kan mij op weg helpen?
Deze vraag heb ik per ongeluk eerst in PHP form geplaatst,maar ik probeer het eerst met JavaScript.
 
Eerst en vooral bestaat de tag "name" bij mijn weten niet.
Ten tweede gebruik je bij een select geen innerHTML, maar creëer je in je script een nieuw element voor elk element dat je wilt aan je select wilt toevoegen.
Hier is een werkende code waarbij ik name gewijzigd heb door span en het element option creëer voor elk element dat je wilt toevoegen:

HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Elementen toevoegen aan een select</title>
<script>
function myFunction() {
    var x = document.getElementsByTagName("span");
	for (i = 0; i < x.length; i++) {
		var newoption = document.createElement("option");
		newoption.text = x[i].innerHTML;
		newoption.value = i;
		document.getElementById("layer").add(newoption);
	 }
}
</script>
</head>
<body>
<button onclick="javascript:myFunction()">klik</button>

<span>a</span>
<span>b</span>

<select name="laag" id="layer">
	<option value=""></option>
</select>	
</body>
</html>

Het nadeel is dat je telkens je op de knop klikt je dezelfde elementen achter de reeds bestaande elementen toevoegt.
Hieronder zie je dat je de bestaande elementen ook eerst kan verwijderen.
Ik heb ervoor gezorgd dat het lege element niet verwijderd wordt.

HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script>
function myFunction() {
	var a = document.getElementById("layer");
	while (a.length > 1) {
		a.remove(a.length-1);
	}
    var x = document.getElementsByTagName("span");
	for (i = 0; i < x.length; i++) {
		var newoption = document.createElement("option");
		newoption.text = x[i].innerHTML;
		newoption.value = i;
		a.add(newoption);
	 }
}
</script>
</head>
<body>
<button onclick="javascript:myFunction()">klik</button>

<span>a</span>
<span>b</span>

<select name="laag" id="layer">
	<option value=""></option>
</select>	
</body>
</html>
 
Laatst bewerkt:
Dit is het geworden:
een extra newoption.value = x.innerHTML; erbij, want dat had ik nodig voor een andere functie.

Code: 
				var a = document.getElementById("layer");
				while (a.length > 1) {
					a.remove(a.length-1);
				}
				var x = document.getElementsByTagName("name");
				for (i = 1; i < x.length; i++) {
					var newoption = document.createElement("option");
					newoption.text = x[i].innerHTML;
					newoption.value = x[i].innerHTML;
					a.add(newoption);
				 };

Nu probeer ik ook de text in de tagname te tonen in: div id="bron"></div>
Maar wat doe ik fout?? Ben een beginneling...:(

Code: 
			var b = document.getElementById("bron");
				while (b.length > 1) {
					b.remove(b.length-1);
			}
			var bronWms = document.getElementsByTagName("name");
			for (i = 1; i < bronWms.length; i++) {
				var newtxt = document.getElementsById("bron");
				newtxt.text = bronWms[i].innerHTML;
				b.add(newtxt);
			};
 
Gelukt:

Code: 
var bron = document.getElementsByTagName("title");
document.getElementById("bron").innerHTML = bron[1].innerHTML;
 
Laatst bewerkt:
Hallo. Ik heb toch wat problemen. Ik probeer <Title> van een xml bestand in een options lijst te krijgen:
Maar hij plaatst niet alle <title> tags erin. Volgens mij moet ik "<option>"; ook een keer afsluiten </option>, maar hoe verwerk ik dat?

Code: 
			function myFunction(xml) {
				var x, i, xmlDoc, txt;
				xmlDoc = xml.responseXML;
				txt = "";
				x = xmlDoc.getElementsByTagName("Title");
				for (i = 0; i < x.length; i++) { 
					txt += x[i].childNodes[0].nodeValue + "<option>";  
				}
				document.getElementById("layer").innerHTML = txt;


Code: 
<select name="laag" id="layer">
    <option value=""></option>
</select>
 
Ik vraag mij af waarom je innerHTML blijft gebruiken terwijl in mijn voorbeeld enkel createElement gebruikt werd dat automatisch de <option> afsluit.
Voeg tussen mijn voorbeeld gewoon newoption.title = "titel"; toe.
 
Ik heb de code werkend gekregen:

Code: 
			function myFunction(xml) {
				var x, i, xmlDoc, txt;
				xmlDoc = xml.responseXML;
				txt = "";
				//Leeg option lijst
				 var a = document.getElementById("layer");
				while (a.length > 1) {
				a.remove(a.length-1);
				}
				//Plaats <title> in option lijst
				var x = xmlDoc.getElementsByTagName("Title");
				for (i = 0; i < x.length; i++) {
					var newoption = document.createElement("option");
					newoption.text = x[i].innerHTML;
					newoption.value = x[i].innerHTML;
					document.getElementById("layer").add(newoption);
				}

Ik heb je vorige code gebruikt en wat aangepast omdat ik met xml bestand ben gaan werken (wat ik eerst niet deed) en nu werkt het.
Onderstaande website is de basis alleen wilde ik dus de Title tags uit een xml kunnen halen en plaatsen in een option lijst en dat is gelukt.
Bedankt voor je hulp.
http://www.w3schools.com/xml/tryit.asp?filename=try_dom_xmlhttprequest_responsexml
 
Ik heb wel nog 1 vraagje. Ik krijg netjes al de Title tags uit een xml bestand als option in mijn layer id. Maar hoe kan ik ervoor zorgen dat de eerste optie niet wordt weergegeven?

Code: 
<select name="laag" id="layer">
    <option value=""></option>
</select>
 
Hoe bedoel je "niet wordt weergegeven"? Wil je dat de optie niet direct geselecteerd is, maar wel in de lijst voorkomt of wil je de optie helemaal niet in de lijst?

Voor het eerste geval:

HTML: 
<select name="laag" id="layer">
    <option value="Nothing selected" selected></option>
</select>
Voor het tweede geval. Verwijder het element uit je array m.b.v. de splice method (http://www.w3schools.com/jsref/jsref_splice.asp).
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan