Auswahlmenü wie bei Ebay! [Archiv]

Archiv verlassen und diese Seite im Standarddesign anzeigen : Auswahlmenü wie bei Ebay!

Satherlor

14.10.2003, 15:50:39

Moin,
ich möchte gerne ein Auswahlmenü (beim Verkauf (bei der Auswahl der Kategorie)) wie bei Ebay. Die haben das mit einem Applet gelößt, ich möchte das gerne mit Java Script. Den folgenden Script hab ich bei SelfHTML gefunden:

<html>
<body>
<form action="ausgabe.php">
<select name="produkt1" size="10"
onchange="alert(this.form.Pizza.options // !!!KNACKPUNKT!!![this.form.Pizza.selectedIndex].value)">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Funghi</option>
<option value="P103">Pizza Mare</option>
<option value="P104">Pizza Tonno</option>
<option value="P105">Pizza Mexicana</option>
<option value="P106">Pizza Regina</option>
<option value="P107">Pizza de la Casa</option>
<option value="P108">Pizza Calzone</option>
<option value="P109">Pizza con tutti</option>
</select>
</p>
</form>

<form action="ausgabe.php">
<select name="produkt2" size="10"
onchange="alert(this.form.Pizza.options[this.form.Pizza.selectedIndex].value)">
</select>
</p>
</form>

</body>
</html>

Die einfachste Variante meiner Meinung nach wäre, bei "onchange" beim 1. Auswahlkasten nicht ein "alert" auszugeben, sondern quasi zu sagen: "onchange='produkt2 + <option>123</option> + ..." Also wenn ich eine Kategorie ausgesucht habe und diese angeklickt hab, sich im 2. Auswahlkasten ein spezifischer Unterkategorieauswahlkasten erscheint. Wie kann ich das ambesten machen?

Gweilo

14.10.2003, 16:00:30

function zeigeFeld(auswahl)
{
// zeige hier je nachdem, was auswahl ist
}

onchange="zeigeFeld(this.form.produkte.value)"

Das mit dem zeigen könntest du mit DIV's machen, weiss jedoch nicht, was am optimalsten ist. Bei der Adobe Acrobat Website zeigen sie glaub auch erst nach der Auswahl eine weitere Abfrage mit JS, ich glaube es war bei adobe.com unter den downloads, weiss es jedoch nicht sicher.

Und, ob this.form.produkte.value funktioniert weiss ich auch nicht, musst du halt danach suchen...

Gweilo

14.10.2003, 16:05:03

http://www.adobe.com/products/acrobat/readstep2.html

Schau dir da mal den code an.

Satherlor

14.10.2003, 16:28:43

der is nen bisschen komplex für mich! Ich hab nicht allzu viel Ahnung von JavaScript! Ich hab den Quelltext jetzt erstmal bi hierhin gebaut, was is daran noch falsch oder was muss man da noch weiter machen?

<html>
<head>
<script language="JavaScript">

function zeigeFeld()
{
<option value="P101">Test1</option>
<option value="P102">Test2</option>
}
</head>
<body>
<form action="ausgabe.php">
<select name="produkt1" size="10"
onchange="zeigeFeld(this.form.produkte.value)">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Funghi</option>
<option value="P103">Pizza Mare</option>
<option value="P104">Pizza Tonno</option>
<option value="P105">Pizza Mexicana</option>
<option value="P106">Pizza Regina</option>
<option value="P107">Pizza de la Casa</option>
<option value="P108">Pizza Calzone</option>
<option value="P109">Pizza con tutti</option>
</select>
</p>
</form>
</body>
</html>

wenn ich den gesammten Head weglasse, dann sagt er, dass da ein Fehler in der Zeile: onchange="zeigeFeld(this.form.produkte.value)"> wäre! Und dass das Null oder kein Objekt wäre...!?

Gweilo

14.10.2003, 17:36:24

hier einige brauchbaren Schnippsel des Codes.



<div ID="step2">
<table WIDTH="535" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr>
etc...

// show and hide layers depending on selections
function updateLayers(form) {
var language = form.language.options[form.language.selectedIndex].value;
var platform = form.platform.options[form.platform.selectedIndex].value;
var connectionspeed = form.connectionspeed.options[form.connectionspeed.selectedIndex].value;
var option = form.option[0].checked ? 'full' : 'min';

// pick layer scenario
var scenario = fileinfo[option] && fileinfo[option][platform] && fileinfo[option][platform][language] && fileinfo[option][platform][language][2];
if (! scenario) scenario = 'unavailable';
if (language == '' || platform == '' || connectionspeed == '') scenario = 'initial';

// update layers
if (scenario == 'reader60' || scenario == 'reader51')
layerscenarios[scenario]['msg-dialup'] = (connectionspeed == 'dialup') ? 'block' : 'none';
for (var layer in layerscenarios[scenario])
document.getElementById(layer).style.display = layerscenarios[scenario][layer];
if (form.esdcanbeused.value == '0' && layerscenarios[scenario]['dlmmessage'] != 'none')
document.getElementById('dlmmessage').style.display = 'none';
}

<select NAME="language" SIZE="1" ONCHANGE="changedLanguage(form);">

In Deinem Fall, wo du nur ein Select Feld hast kannst du direkt updateLayers(form) reinsetzen.

Hoffe das hilft dir.