Dynamische Select-Box

duronat

Grünschnabel
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
 
Hallo,

hab schnell was gebastelt :)
PHP:
<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
 
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 !
 
Hi

ich nutze den Thread einfach mal obwohl er schon ein bisschen älter !
Also, nach über 8 Jahren kann man schon einen neuen aufmachen,
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

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.
 
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:
Code:
<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...

Code:
<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ß
 
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!
 
Zurück