✔ Dropdownmenu-Werte

messmar · 30. November 2006

Hallo,

Kann man einem Dropdownmenu einen bsetimmten Wert zuweisen.

Ich meine, wenn der user eine bestimmte Auswahl im ersten Dropdown trifft, dann sollte einen bestimmten Wert in zweiten Auswahl angezeigt wird bzw. selected sein.

Hat Jemand eine Idee, wie da szu realiseren ist.

Ich habe was versucht aber es scheint nicht zu funkz.

Danke und Gruß
Messmar

Quaese · 30. November 2006

Hi,

Du könntest die values der ersten Select-Gruppe mit einem Präfix einleiten, über welches die Optionen indentifiziert
werden können, die in der zweiten Gruppe ausgewählt werden sollen.

Beispiel:
value="0_wert": die Null identifiziert den Eintrag, der in der zweiten Gruppe gewählt werden soll

Folgendes Konstrukt realisiert dies.

Code:

<form>
  <select name="selFirst" onchange="this.form.selSecond.selectedIndex=this[this.selectedIndex].value.split('_')[0];">
  	<option value="2_val0">Wert 0</option>
  	<option value="1_val0">Wert 1</option>
  	<option value="1_val0">Wert 2</option>
  	<option value="0_val0">Wert 3</option>
  </select>
  <select name="selSecond">
  	<option value="val0">Wert 0</option>
  	<option value="val0">Wert 1</option>
  	<option value="val0" selected="selected">Wert 2</option>
  	<option value="val0">Wert 3</option>
  </select>
</form>

Ciao
Quaese

messmar · 3. Dezember 2006

Danke, aber das hilft mir nicht viel bei meinem Code hier.

Ich habe es erreicht, dass das zweite Dropdown den Wert, den ich haben will bekommt aber nicht beim dritten Dropdown.

Ich will erreichen, dass wenn der User den Wert:"Ich habe kein Auto" beim ersten Dropdown
auswählt, das zweite und das dritte Dropdown auch diesen Wert bekommen.

Danke und Gruß
Messmar

Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body  onload="init( document.cars.aktAutomarke );">
<script>
var autos= {
		  'Ich habe kein Auto' : {
                       'Ich habe kein Auto' : [
                                    'Ich habe kein Auto'
                                  ]
						},
          'Alfa Romeo' : {
                            '147' : [
                                       '1,6 T.Spark 105PS 3T',
                                       '1,6 T.Spark 105PS 5T',
                                       '1,6 T.Spark 120PS 3T',
                                       '1,6 T.Spark 120PS 5T',
                                       
                                       '3,2 V6 24V GTA'
                                     ],
                            
                            'Crosswagon Q4' : [
                                                 '1,9 JTD 16V'
                                               ],
                            
                            'Sportwagon' : [
                                              '1,6 T.Spark',
                                              '1,8 T.Spark',
                                              '1,9 JTD',
                                              '1,9 JTD 16V M-JET',
                                              '2,0 JTS',
                                              '2,4 JTD 20V M-JET',
                                              '2,5 V6 24V',
                                              '3,2 V6 24V GTA'
                                            ]
                          },
          'Aston Martin' : {
                              'DB7' : [
                                         'GT',
                                         'GT A',
                                         'Vantage Coupé',
                                         'Vantage Volante'
                                       ],
                              'DB9' : [
                                         'Coupé',
                                         'Volante'
                                       ],
                              'V8 Vantage' : [
                                                '4,3 V8'
                                              ],
                              'Vanquish' : [
                                              'V12',
                                              'V12 S'
                                            ]
                            },
          'Audi' : {
                      'A2' : [
                                '1,2 TDI',
                                '1,4',
                                '1,4 TDI (75PS)',
                                '1,4 TDI (90PS)',
                                '1,6 FSI'
                              ],
                      
                      'Allroad quattro' : [
                                             '2,5 TDI (163PS)',
                                             '2,5 TDI (180PS)',
                                             '2,7 T'
                                           ],
                      
                      'TT' : [
                                'Coupé 1,8 T (150PS)',
                                'Coupé 1,8 T (180PS)',
                                
                                'Roadster 1,8 T quattro (225PS)',
                                'Roadster 3,2 V6 quattro'
                              ]
                    }

		}
		
function init( selection ) {
	var i= selection.options.length;
	for ( var marke in autos ) {
		selection.options[i++]= new Option( marke, marke );
	}
}

function showModell( selection, variante, marke ) {
	var i= selection.options.length= variante.options.length= 1;
	for ( var modell in autos[ marke ] ) {
		selection.options[i++]= new Option( modell, modell );
	}
}

function showVariante( selection, marke, modell ) {
	var i= selection.options.length= 1;
	for ( var j=0 ; j < autos[ marke ][ modell ].length ; ++j ) {
		selection.options[i++]= new Option( autos[ marke ][ modell ][ j ], autos[ marke ][ modell ][ j ] );
	}
}
</script>

<div>
<form name="cars" action="verify.jsp" method="post">
	<fieldset id="formDefault">
		<label>Vorname:</label><input type="text" name="username" value="" style="margin-left:5em;" />
		<br />
		<label>Nachname:</label><input type="text" name="userLname" value="" style="margin-left:5em;" />
		<br />
		<label>Plz:</label><input type="text" name="zipcode" value="" style="margin-left:5em;" />
		<br />
		<label class="aktAutoMarkeModell">gggggggggg:</label>
		<select name="aktAutomarke" id="automarke" style="width:210px;margin-left:5em;" onChange="showModell( this.form.autoModell, this.form.autoVariante, this.value );">
			<option value="" selected="selected" style="width:180px;"></option>
		</select>
		<br />
		<label class="aktAutoMarkeModell">ffffffffsdfsd:</label>
		<select name="autoModell" id="automodellA" style="width:210px;margin-left:5em;" onChange="showVariante( this.form.autoVariante, this.form.automarke.value, this.value);">	
			<option value="" selected="selected" style="width:180px;"></option>
		</select>
		<br />
		<label class="aktAutoMarkeModell">yyyyyyyyyyyyyyy:</label>
		<select name="autoVariante" id="neuesAutoMarke" style="width:210px;margin-left:5em;">
			<option value="" selected="selected" style="width:180px;"></option>
		</select>
		
		<br /><br />
		
		<input type="Submit" value="Hier losfahren" style="clear:right;width:120px;height:25px;font-weight:bold;margin-top:-20px;margin-left:327px;">
	</fieldset>
</form>
</div>
</body>
</html>

Quaese · 3. Dezember 2006

Hi,

Du kannst doch den aktuell ausgewählten assoziativen Index (aus value) verwenden, um eine Verarbeitung anzustossen,
durch die die Folge-Select-Gruppen aktualisiert werden. Dazu hangelst Du Dich ausgehend vom Index durch das Array.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<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 autos = {
	'Ich habe kein Auto' : {
		'Ich habe kein Auto' : [
	  	'Ich habe kein Auto'
	  ]
	},

  'Alfa Romeo' : {
	  '147' : [
       '1,6 T.Spark 105PS 3T',
       '1,6 T.Spark 105PS 5T',
       '1,6 T.Spark 120PS 3T',
       '1,6 T.Spark 120PS 5T',

       '3,2 V6 24V GTA'
     ],

	  'Crosswagon Q4' : [
       '1,9 JTD 16V'
     ],

	  'Sportwagon' : [
      '1,6 T.Spark',
      '1,8 T.Spark',
      '1,9 JTD',
      '1,9 JTD 16V M-JET',
      '2,0 JTS',
      '2,4 JTD 20V M-JET',
      '2,5 V6 24V',
      '3,2 V6 24V GTA'
    ]
  },

  'Aston Martin' : {
    'DB7' : [
	     'GT',
	     'GT A',
	     'Vantage Coupé',
	     'Vantage Volante'
	   ],
    'DB9' : [
       'Coupé',
       'Volante'
     ],
    'V8 Vantage' : [
      '4,3 V8'
    ],
    'Vanquish' : [
      'V12',
      'V12 S'
    ]
  },

  'Audi' : {
    'A2' : [
      '1,2 TDI',
      '1,4',
      '1,4 TDI (75PS)',
      '1,4 TDI (90PS)',
      '1,6 FSI'
    ],

    'Allroad quattro' : [
       '2,5 TDI (163PS)',
       '2,5 TDI (180PS)',
       '2,7 T'
     ],

    'TT' : [
      'Coupé 1,8 T (150PS)',
      'Coupé 1,8 T (180PS)',

      'Roadster 1,8 T quattro (225PS)',
      'Roadster 3,2 V6 quattro'
    ]
  }

}

// Felder
var arrCarFields = new Array("aktAutomarke", "autoModell", "autoVariante");

// Funktion initialisiert die Selectgruppen
// objSel - Ausgangs-Select-Gruppe (hier: document.cars.elements[arrCarFields[0]])
function init(objSel) {
  var i=0;
  var blnChecked;
  var objForm = objSel.form;

  objSel.length = 0;

  // Alle Marken durchlaufen
  for (var strEntry in autos) {
    // Falls es sich um die erste Komponente handelt - selektieren
    if(i++ == 0){
      blnChecked = true;
      // Falls noch nachfolgende Felder upgedatet werden müssen
      updateModell(objForm, autos[strEntry], 1);
    }else{
      blnChecked = false;
    }

    objSel.options[objSel.length] = new Option(strEntry, strEntry, false, blnChecked);
  }
}

// Baut die Select-Gruppen ab einem übergenenen Index auf (intFeld)
// objForm - Objekt des Formulars, in dem die Select-Gruppen enthalten sind
// arrHelp - Komponente des Array-Objekts, die verarbeitet werden soll
// intFeld - Index des ersten zu bearbeitenden Feldes (korrespondiert mit arrCarField)
function updateModell(objForm, arrHelp, intFeld){

  var blnChecked = false;  // Testvariable
  var i=0;                 // Zählvariable
  var strOption;           // Ausgabestring in Option

  objForm.elements[arrCarFields[intFeld]].length = 0;

  // Übergebenen Array komponentenweise durchlaufen
  for(var strEntry in arrHelp){

    // Falls es sich um den ersten Eintrag handelt -> selektieren
    if(i++ == 0){
      blnChecked = true;
      // Falls noch nachfolgende Felder upgedatet werden müssen
      if(intFeld < arrCarFields.length-1)
        updateModell(objForm, arrHelp[strEntry], (intFeld+1));
    }else{
      blnChecked = false;
    }

    // Handelt es sich um ein Array -> Index ausgeben, sonst auf Index enthaltenen String ausgeben
    strOption = (typeof(arrHelp[strEntry]) == "object") ? strEntry : arrHelp[strEntry];
    // Neue Option erstellen und an Select-Gruppe anhängen
    objForm.elements[arrCarFields[intFeld]].options[objForm.elements[arrCarFields[intFeld]].length] = new Option(strOption, strOption, false, blnChecked);
  }
}

function showModell(objSel) {
  // Modell updaten
  updateModell(objSel.form, autos[objSel.options[objSel.selectedIndex].value], 1);
}

function showVariante(objSel) {
  // Automarke ermitteln
  var strMarke = objSel.form.elements[arrCarFields[0]].options[objSel.form.elements[arrCarFields[0]].selectedIndex].value;

  // Variante updaten
  updateModell(objSel.form, autos[strMarke][objSel.options[objSel.selectedIndex].value], 2);
}


 //-->
</script>

</head>
<body onload="init(document.cars.elements[arrCarFields[0]]);">
<div>
<form name="cars" action="verify.jsp" method="post">
	<fieldset id="formDefault"><legend>Allgemeine Angaben</legend>
		<label>Vorname:</label><input type="text" name="username" value="" style="margin-left:5em;" />
		<br />
		<label>Nachname:</label><input type="text" name="userLname" value="" style="margin-left:5em;" />
		<br />
		<label>Plz:</label><input type="text" name="zipcode" value="" style="margin-left:5em;" />
		<br />
		<label class="aktAutoMarkeModell">gggggggggg:</label>
		<select name="aktAutomarke" id="automarke" style="width:210px;margin-left:5em;" onChange="showModell(this);">
			<option value="" selected="selected" style="width:180px;"></option>
		</select>
		<br />
		<label class="aktAutoMarkeModell">ffffffffsdfsd:</label>
		<select name="autoModell" id="automodellA" style="width:210px;margin-left:5em;" onChange="showVariante(this);">
			<option value="" selected="selected" style="width:180px;"></option>
		</select>
		<br />
		<label class="aktAutoMarkeModell">yyyyyyyyyyyyyyy:</label>
		<select name="autoVariante" id="neuesAutoMarke" style="width:210px;margin-left:5em;">
			<option value="" selected="selected" style="width:180px;"></option>
		</select>

		<br /><br />

		<input type="Submit" value="Hier losfahren" style="clear:right;width:120px;height:25px;font-weight:bold;margin-top:-20px;margin-left:327px;">
	</fieldset>
</form>
</div>
</body>
</html>

Ciao
Quaese

messmar · 4. Dezember 2006

Hallo,

vielen Dank schon Mal. Diesmal hat klapt es. Aber es wurde, was die Funktionen angeht, Vieles geändert ;-)

Und Danke auch für die tolle Ausführliche Erklärung des Codes durch die Kommentare.

Gruß
Messmar

son gohan · 4. Dezember 2006

Hallo,

ich hab ein ähnliches Problem mit einem Dripdownmenü.

Ich will das sich bei einer Auswahl die Seite im gleichen Fenster öffnet, zur Zeit habe ich aber etwas das die Seite in einem neuen Fenster öffnet:

PHP:

<select size="1" onchange="window.open(this.value, '')">
<option value="#">Shopauswahl</option>
<option value="nix">--------------------</option>
<option value="http://www.123.de/index.html">123</option>
</select>

Ich hab auch schon gesehen das durch meinen derzeitigen Code bei manchen Leuten eine Pop up Warnung kommt und die Seite gar nicht geöffnet wird.

Ich habe auch bei http://de.selfhtml.org/javascript/beispiele/verweisliste.htm etwas gefunden was eigentlich genau richtig ist, aber bei mir hat es nicht geklapt. ich denke das lag daran das ich kein Framesets benutze in meiner Seite und es auch nicht will.

Maik · 4. Dezember 2006

@son gohan

Probier's mal hiermit:

Code:

<script type="text/javascript">
function surfto(form) {
var myindex=form.linkliste.selectedIndex
if (form.linkliste.options[myindex].value != "0") {
location=form.linkliste.options[myindex].value;}
}
</script>

Code:

<form>
    <select name="linkliste" size="1" onchange="surfto(this.form)">
        <option value="#">Shopauswahl</option>
        <option value="nix">--------------------</option>
        <option value="http://www.123.de/index.html">123</option>
    </select>  
</form>

son gohan · 4. Dezember 2006

michaelsinterface hat gesagt.:

@son gohan

Probier's mal hiermit:

Code:

<script type="text/javascript">
function surfto(form) {
var myindex=form.linkliste.selectedIndex
if (form.linkliste.options[myindex].value != "0") {
location=form.linkliste.options[myindex].value;}
}
</script>

Code:

<form>
    <select name="linkliste" size="1" onchange="surfto(this.form)">
        <option value="#">Shopauswahl</option>
        <option value="nix">--------------------</option>
        <option value="http://www.123.de/index.html">123</option>
    </select>  
</form>

Yes, ganz toll genau so soll es sein, klapt, danke.

✔ Dropdownmenu-Werte

messmar

Erfahrenes Mitglied

Quaese

Moderator

messmar

Erfahrenes Mitglied

Quaese

Moderator

messmar

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

Maik

son gohan

Erfahrenes Mitglied

Neue Beiträge