Auswahl eines wertes in Select Box bestimmten Wert anzeigen

F

flipo84

Mitglied
Hallo Leute,

bin absoluter Neuling in Sachen JavaScript und bräuchte auf die schnelle eure Hilfe:

Also folgendes Problem ich habe eine Select Box mit 4 einträgen:

Preis1 ( hat z.b die werte 200, 100, 200)
Preis2
Preis3
Preis4

Wähle ich jetzt in meiner Select box den ersten Eintrag aus: also Preis1 soll in einer Auswahlleiste mittels radiobutton die anzeige

o 200
o 100
o 200
erfolgen wo man dann den entsprechenden Betrag vorne auswählen

Hoffe das es verständlich ist und das mir jemand helfen kann
 
Guten Morgen,

die Werte sind nicht genau definiert als man kann Sie einfach übergeben, sind nur werte.

Als Array oder variable ist echt egal.

ich muss es nur hinbekommen das wenn ich in meiner selectbox preis1 auswähle, dann dann in meiner Radiobutton auswahl folgendes erscheint:

o Preis zu 100
o Preis zu 200
o Preis zu 300
 
Hi,

erstelle ein mehrdimensionales Array. Die erste Komponente erhält als Feld die Werte zur ersten Option, die zweite Komponente die Werte zur zweiten Option usw. Die entsprechende Komponente des Arrays wird über das value-Attribut der Option angesprochen.In einer Routine werden nun die gewünschten Radiobuttons erstellt und in einen Container eingehängt.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrValues = [["0.0", "0.1", "0.2"],  // Werte zur Option mit value=0
                 ["1.0", "1.1", "1.2"],  // Werte zur Option mit value=1
                 ["2.0", "2.1", "2.2"]]; // Werte zur Option mit value=2

function updateRadio(objSelect){
  // Element für die Radiobuttons leeren
  var objDiv = document.getElementById("radioDiv");
  objDiv.innerHTML = "";
  // Falls eine Option mit gültigem Wert gewählt wurde
  if(objSelect.options[objSelect.selectedIndex].value != "-1"){
    // Array mit den Werten für die Radio-Gruppe durchlaufen
    for(var i=0; i<arrValues[parseInt(objSelect.options[objSelect.selectedIndex].value)].length; i++){
      // Neues Radioelement erstellen (mit Weiche für IE wg. Problem mit name-Attribut)
      if(document.all && !window.opera){
        var objRadio = document.createElement("<input name=\"preis\">");
      }else{
        var objRadio = document.createElement("input");
        objRadio.name = "preis";
      }
      objRadio.type = "radio";
      objRadio.value = arrValues[parseInt(objSelect.options[objSelect.selectedIndex].value)][i];
      objDiv.appendChild(objRadio);
      // Beschreibung zuweisen
      var objLabel = document.createElement("label");
      objLabel.innerHTML = arrValues[parseInt(objSelect.options[objSelect.selectedIndex].value)][i];
      objDiv.appendChild(objLabel);
      // Zeilenumbruch einfügen
      objDiv.appendChild(document.createElement("br"));
    }
  }
}
 //-->
</script>
</head>
<body>
<form>
  <select onchange="updateRadio(this);">
    <option value="-1">- auswaehlen -</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <div id="radioDiv"></div>
</form>
</body>
</html>
Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Hi!
Ich hab dir einfach mal schnell ein script geschrieben damit du siehst wie das prinzipiell funktionieren könnte. Entweder du übernimmst es und bearbeitest nur die Einträge. Oder du guckst es dir nur mal kurz an - schließt die Seite und versuchst es selbst zu coden :)

Hoffe das hilft dir weiter:

HTML: 
<script type="text/javascript">
function writeRadio (id) {
	switch (id) {
		case "foo":
			var content = new Array(100,200,300,234,456,774,843);
			break;
		case "bar":
			var content = new Array(101230,2432400,302356560);
			break;
		case "baz":
			var content = new Array(100,20123120,30021312);
			break
		case "blubb":
			var content = new Array(1101230,5503450,333453400);
			break;
	}
	var c = document.getElementById("container");	
	c.innerHTML = "";
	for (var Preis in content) {
	 	c.innerHTML = c.innerHTML + "<input type='radio' name='preis' value='" +content[Preis]+"'>"+content[Preis]+"<br>\n";
	};
		
	
}


</script>


<form>
<select name="kategorie" onchange="writeRadio(this.value)">
<option id="foo" value="foo">Preis1</option>
<option id="bar" value="bar">Preis2</option>
<option id="baz" value="baz">Preis3</option>
<option id="blubb" value="blubb">Preis4</option>
</select>

<div id="container">
Bitte wählen Sie einen Preis aus.
</div>

</form>

Edit: Hoppala, da war Quaese ein bischen schneller :)
Quaese's Script sieht netter aus als meins da hier direkt mit DOM-Nodes gearbeitet wird.
Funktionieren werden jedoch beide ;)
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück