Selects voneinander abhängig machen
lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess
ahnung
auswahl
auswahlfenster
basteln
button
code
dank
datei
ergebnis
folgende auswahl
form
http
information
jemand
netz
raten
sagen
server
tip
versuchen
-
hallo zusammen,
bin neu hier…
als ersters ich allerdings sagen, dass ich so gut wie keine ahnung von php habe...
würde mir gerne aber für meine anstehende homepage was basteln!
und zwar bräuchte ich 3 auswahlfenster, die von einander abhängig sind...
habe hier folgenden code zum thema im netz gefunden.
wie bekomme ich das jetzt hin, wenn ich auf mein ergebnis button klicke,
dass ich auch ein ergebnis zu sehen bekomme.
z.b. folgende Auswahl:
A1*B1*C1 --ergebnis button drücken— „ergebnis lautet a1bac1 "“
Oder
A3*B1*C2 – ergebnis button drücken – „ergebnis lautet a3b1c2“ usw…
Kann mir da jemand weiterhelfen bitte???
Vielen dank.
Hier der code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> //<![CDATA[ MultiSelect = { oSelects: null, aOptions: null, fCallback: null, /** * initiate MulitSelect with <select name> * @class MulitSelect * @public * @param string <select name> schema * @param array option objects * @param fn event callback */ init: function(sArgName, aArgOptions, fArgCallback) { if (typeof fArgCallback == "function") { this.fCallback = fArgCallback; } else { this.fCallback = function() {}; } this.oSelects = document.getElementsByName(sArgName + "[]"); this.aOptions = aArgOptions; var oOption, oSelect = this.oSelects[0]; for (var i = 0; i < aArgOptions.length; ++i) { oOption = aArgOptions[i]; oSelect.options[oSelect.options.length] = new Option(oOption.text, oOption.value, !!oOption.selected); } this.fCallback("onInit", [ this.oSelects ]); oSelect.removeAttribute("disabled"); }, /** * @class MulitSelect * @public * @param HTMLNode <select> */ changeOption: function(oArgSelect) { var sSelValue, aTrace = [], aValues = []; for (var i = 0; i < this.oSelects.length; ++i) { sSelValue = this.oSelects[i].options[this.oSelects[i].selectedIndex].value; if (!this._isValidValue(sSelValue)) { break; } aTrace.push(sSelValue); if (this.oSelects[i] == oArgSelect) { break; } } this.fCallback("onChange", [ this._resolveTrace(aTrace) ]); this._setupOptions(aTrace, this.aOptions, 0); }, /** * @class MulitSelect * @private */ _isValidValue: function(sArgValue) { return (sArgValue != "0"); }, /** * cleaning, disabling, restoring and enabling of <select> <option>s * @class MulitSelect * @private */ _setupOptions: function(aArgTrace, oArgOptions, iArgDepth) { if (aArgTrace.length > 0) { // resolve value var sValue = aArgTrace.shift(); for (var i = 0; i < oArgOptions.length; ++i) { if (oArgOptions[i].value == sValue) { this._setupOptions(aArgTrace, oArgOptions[i].options, iArgDepth + 1); break; } } } else { for (var i = iArgDepth; i < this.oSelects.length; ++i) { // loop relevant <select>s for (var k = this.oSelects[i].options.length - 1; k >= 0; --k) { // loop in reverse to prevent loop break after deleting <option> elements if (this._isValidValue(this.oSelects[i].options[k].value)) { // delete <option> this.oSelects[i].options[k] = null; } } if (i != iArgDepth) { this.oSelects[i].setAttribute("disabled", "disabled"); } } if (iArgDepth < this.oSelects.length && oArgOptions != null) { // new <select> available var oSelect = this.oSelects[iArgDepth], oOption; for (var i = 0; i < oArgOptions.length; ++i) { oOption = oArgOptions[i]; oSelect.options[oSelect.options.length] = new Option(oOption.text, oOption.value); } oSelect.removeAttribute("disabled"); } } }, /** * get option objects by given (selected) values * @class MulitSelect * @private */ _resolveTrace: function(aArgTrace) { var oOption; var aValues = []; var aCache = this.aOptions; for (var i = 0; i < aArgTrace.length; ++i) { // loop values for (var k = 0; k < aCache.length; ++k) { if (aArgTrace[i] == aCache[k].value) { // walk into object, clone it (exclude option element) oOption = {}; for (var sKey in aCache[k]) if (sKey !== "options") oOption[sKey] = aCache[k][sKey]; aCache = aCache[k].options; // object found aValues.push(oOption); break; } } } return aValues; } }; // create example var aOptions = [ { value: "A1", text: "A1", options: [ { value: "A1-B1", text: "B1", options: [ { value: "A1-B1-C1", text: "C1" }, { value: "A1-B1-C2", text: "C2" }, { value: "A1-B1-C3", text: "C3" } ] }, { value: "A1-B2", text: "B2", options: [ { value: "A1-B2-C1", text: "C1" }, { value: "A1-B2-C2", text: "C2" }, { value: "A1-B2-C3", text: "C3" } ] }, { value: "A1-B3", text: "B3", options: [ { value: "A1-B3-C1", text: "C1" }, { value: "A1-B3-C2", text: "C2" }, { value: "A1-B3-C3", text: "C3" } ] } ] }, { value: "A2", text: "A2", options: [ { value: "A2-B1", text: "B1", options: [ { value: "A2-B1-C1", text: "C1" }, { value: "A2-B1-C2", text: "C2" }, { value: "A2-B1-C3", text: "C3" } ] }, { value: "A2-B2", text: "B2", options: [ { value: "A2-B2-C1", text: "C1" }, { value: "A2-B2-C2", text: "C2" }, { value: "A2-B2-C3", text: "C3" } ] }, { value: "A2-B3", text: "B3", options: [ { value: "A1-B3-C1", text: "C1" }, { value: "A1-B3-C2", text: "C2" }, { value: "A1-B3-C2", text: "C3" } ] } ] }, { value: "A3", text: "A3", options: [ { value: "A3-B1", text: "B1", options: [ { value: "A3-B1-C1", text: "C1" }, { value: "A3-B1-C2", text: "C2" }, { value: "A3-B1-C3", text: "C3" } ] }, { value: "A3-B2", text: "B2", options: [ { value: "A3-B2-C1", text: "C1" }, { value: "A3-B2-C2", text: "C2" }, { value: "A3-B2-C3", text: "C3" } ] }, { value: "A3-B3", text: "B3", options: [ { value: "A3-B3-C1", text: "C1" }, { value: "A3-B3-C2", text: "C2" }, { value: "A3-B3-C3", text: "C3" } ] } ] } ]; // something like onDOMReady would be better window.onload = function() { MultiSelect.init("selectElement", aOptions, function(sArgEvent, aArgPayload) { // this is our event callback // let's print out some information var oDom = document.getElementById("events"); oDom.innerHTML = sArgEvent + "<br />"; switch (sArgEvent) { case "onChange": for (var i = 0; i < aArgPayload[0].length; ++i) { oDom.innerHTML += "" + i + ": " + aArgPayload[0][i].text + "<br />"; } // and let's allow only triple-selections document.getElementById("submitButton").disabled = (aArgPayload[0].length != 3); break; } }); }; //]]> </script> </head> <body> <form action="" method="post"> <div> <select name="selectElement[]" onchange="MultiSelect.changeOption(this)" disabled="disabled"> <option value="0">- Auswahl -</option> </select> » <select name="selectElement[]" onchange="MultiSelect.changeOption(this)" disabled="disabled"> <option value="0">- Auswahl -</option> </select> » <select name="selectElement[]" onchange="MultiSelect.changeOption(this)" disabled="disabled"> <option value="0">- Auswahl -</option> </select> » <input type="submit" id="submitButton" value="Ergebnis" disabled="disabled" /> </div> </form> <pre id="events"></pre> </body> </html>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
Du musst in form action="" zwischen die Anführungszeichen den Namen einer php-Datei auf dem Server schreiben, die mit GET das was gepostet wird, auswertet und eine Ergebnisseite zurückgibt. So einfach ist das. Für mehr Informationen rate ich Dir, Dich selbst ein wenig mehr in PHP einzulesen. Ein bisschen Eigeninitiavtive kann man schon verlangen, oder?
LG
BigBaer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage