# Dynamische Select-Box



## duronat (16. Mai 2003)

Hi,

wie kann ich eine Select-Box erstellen, bei der nach Auswahl der Eintrag der zweiten beeinflusst wird. Wähle z.B. ein Auto aus einer Selectbox, in der 2. erscheint dann dessen KFZ-Nr, und umgekehrt.

Bye, duronat


----------



## Andreas Gaisbauer (16. Mai 2003)

Hallo und welcome on Board,

hab hier ein Beispiel für dich - mit den Kommentaren ist es eignentlich selbsterklärend - solltest du trotzdem Probleme haben, einfach nachfragen... 

Beispiel: http://www.javascriptkit.com/script/script2/dcombotext.shtml

bye

//edit: sorry, hab grad gesehen, das es doch etwa an deinen Bedürfnissen vorbei geht...


----------



## Andreas Gaisbauer (16. Mai 2003)

Hallo,

hab schnell was gebastelt 

```
<html>
<head>

<script type="Text/JavaScript">
function switcher(x)
{
	if(x==1)
	{
		document.form_1.select_2.selectedIndex = document.form_1.select_1.selectedIndex;
	}
	else
	{
		document.form_1.select_1.selectedIndex = document.form_1.select_2.selectedIndex;
	}
}
</script>

<form name="form_1">
  <select name="select_1" onChange="switcher(1);">
    <option>Auto wählen</option>
    <option value="Audi">Audi</option>
    <option value="Golf">Golf</option>
    <option value="BMW">BMW</option>
  </select>
  <select name="select_2" onChange="switcher(2);">
    <option>###</option>
    <option value="#1">Audi #1</option>
    <option value="#2">Golf #2</option>
    <option value="#3">BMW #3</option>
  </select>
</form>
</body>
</html>
```
Limitation bei dieser Variante:
1) Jedem Auto kann nur eine Nummer zugeordnet werden
2) Die Nummern müssen wie die Autos manuell in die Dropdown geschrieben werden...

naja, einen Versuch ist´s wert gewesen 

ciao


----------



## duronat (16. Mai 2003)

Hi,

danke dir  Damit kann ich sehr viel anfangen.

Bye, duronat


----------



## Ryan Müller (5. September 2011)

Hallo,

ich nutze den Thread einfach mal obwohl er schon ein bisschen älter !

Ich möchte einen Download(-Modul) mit 2 Selectboxen haben! 

Es soll zuerst nur die erste Selectbox gezeigt werden und mit betätigen der ersten Selectbox soll die zweite Selectbox erscheinen. Bei der zweiten Selectbox soll dann ebenfalls wieder ausgewählt werden und dann eben ein Download button erscheinen mit dem der Download (Direkt link) ausgelöst werden soll. 

Ich kann kein JavaScript, nur ein wenig Java !

Als Kopierpirat habe ich mir schon folgendes ergaunert: 

<script type="Text/JavaScript">
//<![CDATA[
function switcher(x)
{
    if(x==1)
    {
        document.downloader.select_2.selectedIndex = document.downloader.select_1.selectedIndex;
    }
    else
    {
        document.downloader.select_1.selectedIndex = document.downloader.select_2.selectedIndex;
    }
}
//]]>
</script>

<form name="downloader">
<p>
<select name="select_1" onchange="switcher(1);" size="1">
	<option> Auto wählen </option>
    <option value="Audi"> Audi </option>
    <option value="Golf"> Golf </option>
        <option value="BMW"> BMW </option>
</select>
<select name="select_2" onchange="switcher(2);" size="1">
<option selected value="http://www.faz.net">blub</option>
<option value="http://www.google.de">asd</option>
<option value="http://www.test.net">test</option>
<option value="http://www.blub.de">blub </option>
</select>

 <input type="button" value="Download" 
onClick="location=document.downloader.select_2.options[document.downloader.select_2.selectedIndex].value"></p>
</form>

Müsste ich nicht im JavaScript irgendwie erstmal eine Funktion erstellen, die bei onClick den display Wert der zweiten Selectbox von none auf block oder so ändert ? 

Über Hilfe wäre ich dankbar !


----------



## sheel (5. September 2011)

Hi



Ryan MÃ¼ller hat gesagt.:


> ich nutze den Thread einfach mal obwohl er schon ein bisschen älter !


Also, nach über 8 Jahren kann man schon einen neuen aufmachen,


Ryan MÃ¼ller hat gesagt.:


> Ich kann kein JavaScript, nur ein wenig Java !


Hat bis auf den Namen nichts miteinander zu tun.

Zum Code: Du ändert da nur die Auswahl.
Und bitte in Zukunft Codetags verwenden.
Siehe Signatur



Ryan MÃ¼ller hat gesagt.:


> Müsste ich nicht im JavaScript irgendwie erstmal eine Funktion erstellen, die bei onClick den display Wert der zweiten Selectbox von none auf block oder so ändert ?


Genau.


----------



## javaDeveloper2011 (6. September 2011)

Hallo MÃ¼ller,

Also ich würde da eher mit disabled="true" bzw. ="false" arbeiten, willst du dass auf den Seiten nach dem Auto gesucht wird? 

Hier mal ein Beispiel:

```
<html>

<head>
</head>

<body>
	<form name="downloader">
		<select name="car_select" onchange="if(this.selectedIndex != 0) document.downloader.site_select.disabled = false;">
			<option>Auto w&auml;hlen</option>
			<option value="Audi">Audi</option>
			<option value="Golf">Golf</option>
			<option value="BMW">BMW</option>
		</select>
		<select name="site_select" onchange="if(this.selectedIndex != 0) document.downloader.button.disabled = false;" disabled="true">
			<option>Site w&auml;hlen</option>
			<option value="http://www.google.de/search?q=">google</option>
			<option value="http://www.test.net">test</option>
			<option value="http://www.blub.de">blub</option>
		</select>
		<input id="button" type="button" value="Download" 
			onClick="location = document.downloader.site_select.options[document.downloader.site_select.selectedIndex].value + document.downloader.car_select.options
				[document.downloader.car_select.selectedIndex].value" disabled="true" />
	</form>
</body>

</html>
```

Damit die selects nicht mehr nachträglich verändert werden können, währe das mit display wahrscheinlich doch eine recht gute Idee, also...


```
<form name="downloader">
		<select name="car_select" onchange="if(this.selectedIndex != 0){ document.downloader.site_select.style.display = ''; this.style.display = 'none'; }">
			<option>Auto w&auml;hlen</option>
			<option value="Audi">Audi</option>
			<option value="Golf">Golf</option>
			<option value="BMW">BMW</option>
		</select>
		<select name="site_select" onchange="if(this.selectedIndex != 0){ document.downloader.button.style.display = ''; this.style.display = 'none'; }" style="display: none;">
			<option>Site w&auml;hlen</option>
			<option value="http://www.google.de/search?q=">google</option>
			<option value="http://www.test.net">test</option>
			<option value="http://www.blub.de">blub</option>
		</select>
		<input id="button" type="button" value="Download" 
			onClick="location = document.downloader.site_select.options[document.downloader.site_select.selectedIndex].value + document.downloader.car_select.options
				[document.downloader.car_select.selectedIndex].value" style="display: none;" />
	</form>
```

Gruß


----------



## Ryan Müller (6. September 2011)

Hallo, danke für die Antworten. Sorry wegen der Code box.

Also ich habe ehrlich gesagt noch keinen blassen Schimmer, wie man das macht^^ 
Mein Problem liegt vorallem bei dem zusammenspiel der beiden selectboxen.. das die erste Auswahl auch Auswirkung auf die 2.Selectbox hat.

Die Funktionsweise soll so sein - das jeder Option von der zweiten Selectbox ein eigener Link hinzugefügt werden kann. 

Um das mal zu visualisieren: 
1.Select --> 2.Select --> Download
Audi --> A4 -->eigener Link
       --> A6 -->eigener Link
       --> A8 -->eigener Link

BMW--> x1 -->eigener Link
       --> x6 -->eigener Link
       --> M5 -->eigener Link

Von mir aus könnten auch beide Selectbox sofort dargestellt werden sowie der Downloadbutton. Die Idee mit dem display kam mir nur weil ich aus der CSS Definition kenne..

// Habe gerade den Code mal getestet. Das gefällt mir super mit dem leicht hinterlegten!


----------



## javaDeveloper2011 (6. September 2011)

Hi, soll die 2. select also für jeden Wert der 1. andere options haben?


----------



## Ryan Müller (6. September 2011)

javaDeveloper2011 hat gesagt.:


> Hi, soll die 2. select also für jeden Wert der 1. andere options haben?


 
Ja so ist das angedacht - geht das ?^^

Den ersten Code von oben empfinde ich als idealer, da die Erstauswahl noch abgeändert werden kann.


----------



## javaDeveloper2011 (6. September 2011)

Denke schon, ich schreibe gerade an der Umsetzung.


----------



## javaDeveloper2011 (6. September 2011)

Für Golf hast du jetzt keine Modelle angegeben, also erstmal Platzhalter, die Anzahl kannst du beliebig änern und natürlich auh wie die Download-URL letztendlich gebildet wird.

Hier mein Code:

```
<form name="downloader">
		<select name="brand" onchange="if(this.selectedIndex != 0){ this.style.display = 'none'; firstSubmit(this.selectedIndex); }">
			<option> - Marke - </option>
			<option value="Audi">Audi</option>
			<option value="Golf">Golf</option>
			<option value="BMW">BMW</option>
		</select>
		<!-- Audi-Select -->
		<select id="1" onchange="if(this.selectedIndex != 0){ this.style.display = 'none'; document.downloader.button.style.display = ''; }" style="display: none;">
			<option> - Modell - </option>
			<option value="A4">A4</option>
			<option value="A6">A6</option>
			<option value="A8">A8</option>
		</select>
		<!-- Golf-Select -->
		<select id="2" onchange="if(this.selectedIndex != 0){ this.style.display = 'none'; document.downloader.button.style.display = ''; }" style="display: none;">
			<option> - Modell - </option>
			<option value="Golf1">Golf1</option>
			<option value="Golf2">Golf2</option>
			<option value="Golf3">Golf3</option>
		</select>
		<!-- BMW-Select -->
		<select id="3" onchange="if(this.selectedIndex != 0){ this.style.display = 'none'; document.downloader.button.style.display = ''; }" style="display: none;">
			<option> - Modell - </option>
			<option value="x1">x1</option>
			<option value="x6">x6</option>
			<option value="M5">M5</option>
		</select>
		<!-- URL wird zusammengesetzt: <aktuelle url><marke>_<modell> -->
		<input id="button" type="button" value="Download" 
			onClick="location = document.downloader.brand.options[document.downloader.brand.selectedIndex].value + '_' +
				document.getElementById(selectindex).options[document.getElementById(selectindex).selectedIndex].value" 
			style="display: none;" />
	</form>
```

Edit:
Ich hab jetzt doch mit display gearbeitet und einfach gleich 3 selects im HTML notiert.


----------



## Ryan Müller (6. September 2011)

Hey, danke für deine Bemühungen. 

Leider ist jetzt nur noch eine selectbox zu sehen und nach anwählen von Audi, BMW etc. verschwindet die Selectbox und die zweite erscheint nicht ?


----------



## javaDeveloper2011 (6. September 2011)

Sorry, da hab ich den JS-Teil ganz vergessen:

```
<script type="text/javascript">
		var selectindex = 0;
		function firstSubmit(index) {
			selectindex = index;
			document.getElementById(index).style.display = '';
		}
	</script>
```


----------



## Ryan Müller (6. September 2011)

Ah, danke !

Du hast eine PN^^


----------

