Clanintern Clanintern Clanintern

Forum

Öffentliche Foren
FORUM: Spiele & Computer THEMA: [JS] aus js array ein form select befüllen
AUTOR BEITRAG
Ged

RANG Deckschrubber

#1 - 04.06 08:45

zu allererst: ich habe von JS leider keinen blassen schimmer

ich habe ein js array, welches ich über eine URL includiere, das sieht so aus (den aufbau kann ich leider nicht ändern):

(die runden klammern sind eigentlich eckige, hier rund, sonst kommt die code funktion durcheinander)
desti = new Array();
desti("abc") = "text 1";
desti("def") = "text 2";
desti("ghi") = "text 3";
desti("jkl") = "text 4";
code


dessen inhalte möchte ich (okay, ich muss) in einem form select abbilden
statisch gecodet würde es so aussehen:
<select name="top5" size="3">
      <option value="abc">text 1</option>
      <option value="def">text 2</option>
      <option value="ghi">text 3</option>
      <option value="jkl">text 4</option>
    </select>
code


was muss ich machen, damit die inhalte des arrays als optionen in dem select abgebildet werden und ich im eigentlichen html-code entsprechend nur dieses ausführen muss:
<select name="top5" size="3"></select>

noch schlimmer:
ich habe sogar 2 arrays
je nach dem, was in einem vorhergehendem select ausgewählt wird (das wäre dann wirklich statisch), soll das zweite select mit den entsprechenden array inhalten befüllt werden.
wie setze ich das um?

leider habe ich keine beispiele gefunden, welche ich wenigstens für meine zwecke anpassen konnte
sollte jemand etwas in petto haben, wo ich es mir abkucken kann, wäre das sehr willkommen
ne komplette lösung (mit ein paar kleinen stichpunkten, um mich selbständiger zu machen) natürlich auch
pennywise

RANG Deckschrubber

#2 - 04.06 13:45

du brauchst einen Anfangspunkt, eine Stelle an der du die select-optionen anhängen willst. Gehen wir mal von folgendem aus:

<html><body>

<div id="here" />

</body></html>
code


Jetzt gibt es mehrere Möglichkeiten:
1) du machst alles von Hand mit "purem" javascript.
2) du nutzt eine JS-Bibliothek deiner Wahl

1) würde so gehen:
var div = document.getElementById("here");
var select = document.createElement("select");
var i = 0;
for (var key in desti) {
  var option = document.createElement("option");
  var optionText = document.createTextNode(desti_(i)_); // eckige klammern
  option.setAttribute("value", key);
  option.appentElement(optionText);
  select.appendElement(option);
  i++;
}
code


so ungefähr müsste das gehen. Wahrscheinlich läuft das schief, aber nen Ansatz hsate schonmal was du mit deinem "noch schlimmer" meinst, hab ich nicht verstanden.

mit jQuery wäre es "kürzer", das führ ich jetzt aber net aus. Dazu kannst du dir http://docs.jquery.com/Manipulation anguggn
Ged

RANG Deckschrubber

#3 - 04.06 14:46

ich konnte schon mit der hilfe von nem kumpel was zusammenbasteln:

im header werden 2 JS includiert, welche jeweils ein array erzeugen, einmal itsdesti und einmal jahnddesti
js teil (eckige klammern sind wieder rund):
function addOption(txt, val, sel){
	var o = new Option( val, txt, false, true);
	sel.options(sel.length)=o;
}

function init(wert)	{
	if (wert == 'its') {
		document.myform.region.length = null;
		for ( var ky in itsdesti) {
			addOption(ky, itsdesti(ky), document.getElementById('region'));
			//alert( "Key: " + ky + " \nValue: " + itsdesti( ky ) );
		}
	}
	
	if (wert == 'jahn') {
		document.myform.region.length = null;
		for ( var ky in jahnddesti) {
			addOption(ky, jahnddesti(ky), document.getElementById('region'));
			//alert( "Key: " + ky + " \nValue: " + itsdesti( ky ) );
		}
	}
}

code

relevanter html teil:
<form name="myform" action="js_select.html" method="get">
kunde:<br />
 <select name="kunde" onchange="init(this.value)">
    <option>--- Kunde auswählen ---</option>
    <option value="its">ITS</option>
    <option value="jahn">Jahn</option>
  </select>
<br />
region:<br />
<select name="region" id="region"></select>
</form>
code


also im ersten select wird erstmal vorselektiert, aus welchem array die daten kommen sollen ("das schlimme"
darüber wird dann die funktion init ausgeführt und dann das zweite select feld mit optionen befühlt

zu deinem lösungsansatz: hatt das mit dem appendElement besondere vorteile?
pennywise

RANG Deckschrubber

#4 - 07.06 19:40

kannte "new Option()" gar net deswegen hab ich das "append"ed. Wieder was gelernt.
vaest´ark // patrick *circle of confusion*

RANG Deckschrubber

#5 - 12.06 17:20

its und jahnreisen... für ein reisebüro? oder für die rewe-touristik?