php.de

Zurück   php.de > php.de Intern > Wiki Diskussionsforum > Tutorials
HTML/JavaScript: Verschachtelte Auswahlfelder HTML/JavaScript: Verschachtelte Auswahlfelder
Wiki Registrieren Grundlagen Suchen Heutige Beiträge Alle Foren als gelesen markieren

Tutorials Hier findest Du Tutorials, welche nach und nach ein fertiges Script ergeben. Sehen, lernen & verstehen!

Antwort
Seite 3 von 3 < 12 3
 
LinkBack (16) Themen-Optionen Thema bewerten
Alt 14.11.2009, 01:18  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.069
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard
Hallo,

hier eine neue Version, getestet auf IE8 und FF3.5, XHTML strict, kann Events antriggern, und JSON-kompatibel, z.B. durch Verarbeitung von PHP-Arrays direkt aus der DB z.B.

HTML-Variante:
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: "Bundesliga", options: [
                    { value: "A1-B1", text: "FC Bayern München", options: [
                        { value: "A1-B1-C1", text: "Philipp Lahm" },
                        { value: "A1-B1-C2", text: "Bastian Schweinsteiger" },
                        { value: "A1-B1-C3", text: "Mario Gomez" }
                    ] },
                    { value: "A1-B2", text: "SV Werder Bremen", options: [
                        { value: "A1-B2-C1", text: "Hugo Almeida" }
                    ] },
                    { value: "A1-B3", text: "Hertha BSC Berlin" },
                    { value: "A1-B4", text: "TSG Hoffenheim 1899", options: [
                        { value: "A1-B4-C1", text: "Timo Hildebrand" },
                        { value: "A1-B4-C2", text: "Carlos Eduardo" }
                    ] }
                ] },
                { value: "A2", text: "Champions-League", options: [
                    { value: "A2-B1", text: "Real Madrid" },
                    { value: "A2-B2", text: "Manchester United", options: [
                        { value: "A2-B2-C1", text: "Berbatow, Dimitar" }
                    ] }
                ] },
                { value: "A3", text: "Europa-League", options: [] }
            ];

            // 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">- make a choice -</option>
                </select>
                &raquo;
                <select name="selectElement[]" onchange="MultiSelect.changeOption(this)" disabled="disabled">
                    <option value="0">- make a choice -</option>
                </select>
                &raquo;
                <select name="selectElement[]" onchange="MultiSelect.changeOption(this)" disabled="disabled">
                    <option value="0">- make a choice -</option>
                </select>
                &raquo;
                <input type="submit" id="submitButton" value="go" disabled="disabled" />
            </div>
        </form>
        <pre id="events"></pre>
    </body>
</html>
Die PHP-Variante ist der selbe Code, mit Endung *.php natürlich, zusätzlich ganz an den Anfang der (PHP-)Datei diesen Block setzen:
PHP-Code:
<?php
$options = array(
    array("value" => "A1", "text" => "Bundesliga", "options" => array(
        array("value" => "A1-B1", "text" => "FC Bayern München", "options" => array(
            array("value" => "A1-B1-C1", "text" => "Philipp Lahm"),
            array("value" => "A1-B1-C2", "text" => "Bastian Schweinsteiger"),
            array("value" => "A1-B1-C3", "text" => "Mario Gomez")
        )),
        array("value" => "A1-B2", "text" => "SV Werder Bremen", "options" => array(
            array("value" => "A1-B2-C1", "text" => "Hugo Almeida")
        )),
        array("value" => "A1-B3", "text" => "Hertha BSC Berlin"),
        array("value" => "A1-B4", "text" => "TSG Hoffenheim 1899", "options" => array(
            array("value" => "A1-B4-C1", "text" => "Timo Hildebrand"),
            array("value" => "A1-B4-C2", "text" => "Carlos Eduardo")
        ))
    )),
    array("value" => "A2", "text" => "Champions-League", "options" => array(
        array("value" => "A2-B1", "text" => "Real Madrid"),
        array("value" => "A2-B2", "text" => "Manchester United", "options" => array(
            array("value" => "A2-B2-C1", "text" => "Berbatow, Dimitar")
        ))
    )),
    array("value" => "A3", "text" => "Europa-League", "options" => array()
));
?>
Und die Zuweisung der Options in JavaScript erfolgt jetzt durch PHP, in dem der PHP-Array als Objekt ins JavaScript geschossen wird:
PHP-Code:
        <script type="text/javascript">
        //<![CDATA[
            // einzig die Zuweisung zu aOptions ist zu ersetzen:

            // create example
            var aOptions = <?php echo json_encode($options) ?>;
            // ..
        //]]>
        </script>
Anbei noch der Hinweis, wenn ihr die aOptions-Variable an eure Anforderung anpasst:
Die geschweiften Klammern {} stellen ein Objekt dar:
{ key1: "value1", key2: "value2" } entspricht in PHP array("key1" => "value1", "key2" => "value2");
Die Schlüssel "value" und "text" sind zwingend erforderlich, um das Option-Feld zu erzeugen. Was ihr "value" als Wert dann zuweist ({ value: ??? }) ist eure Entscheidung, der Wert muss allerdings eindeutig sein! Falls Sie es nicht sind, benutzt pro <select>-Feld ein Prefix für das Value, über die Events kommt ihr ja an alle Informationen heran, um beispielsweise einen Prefix zu entfernen und die Auswahl in ein <input type="hidden" /> Feld zu schreiben.

In { "options": [] } wird jeweils ein Array (eine Auflistung) erwartet, der wiederum neue <option>-Felder im Stil { value: "value1", text: "Wert 1" } zugewiesen werden können. Die Verschachtelungstiefe ist hier beliebig, muss also nicht auf 3 Stufen begrenzt sein. Natürlich müssen dann auch mehr als 3 <select>-Felder im HTML angelegt werden
Geändert von Chriz (14.11.2009 um 01:29 Uhr).
Chriz ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 14.12.2009, 20:20  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.069
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard
Das ganze jetzt noch mit AJAX:

select.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Verschachtelte Auswahlfelder - AJAX</title>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
        //<![CDATA[[
            var multiSelect = {
                defaultOptions: {},
                change: function(select) {
                    $.getJSON(
                        "ajax.php?" + select.name + "=" + encodeURIComponent(select.value),
                        function(response) {
                            var form = select.form, text;
                            window.console.debug(response);
                            for (var element in response) {
                                select = form.elements[element];
                                multiSelect.clear(select);
                                for (var value in response[element]) {
                                    text = response[element][value];
                                    select.options[select.options.length] = new Option(text);
                                }
                            }
                        }
                    );
                },

                clear: function(select) {
                    for (var i = select.options.length - 1; i > 0; --i) { // exclude "- Bitte .. auswählen -"
                        select.options[i] = null;
                    }
                }
            }
            
        //]]>
        </script>
    </head>
    <body>
        <form action="" method="post">
            <fieldset>
                <legend>Kontinent</legend>
                <select name="continent" onchange="multiSelect.change(this)">
                    <option>Amerika</option>
                    <option>Asien</option>
                    <option>Afrika</option>
                    <option>Europa</option>
                    <option>Australien</option>
                </select>
            </fieldset>
            <fieldset>
                <legend>Land</legend>
                <select name="country" onchange="multiSelect.change(this)">
                    <option value="">- Bitte auswählen -</option>
                </select>
            </fieldset>
            <fieldset>
                <legend>Stadt</legend>
                <select name="city" onchange="multiSelect.change(this)">
                    <option value="">- Bitte auswählen -</option>
                </select>
            </fieldset>
            <div>
                <input type="submit" />
            </div>
        </form>
    </body>
</html>
ajax.php
PHP-Code:
<?php
$data = array(
    "Amerika" => array(
        "USA" => array(
            "New York",
            "Los Angeles"
        ),
        "Kanada" => array(
            "Toronto",
            "Vancouver"
        )
    ),
    "Asien" => array(
        "China" => array(
            "Peking",
            "Shanghai"
        )
    ),
    "Australien" => array(
        "Australien" => array(
            "Sydney",
            "Perth"
        ),
        "Neuseeland" => array(
            "Wellington"
        )
    ),
    "Europa" => array(
        "Deutschland" => array(
            "Berlin",
            "Karlsruhe"
        ),
        "Italien" => array(
            "Rom",
            "Mailand"
        )
    )
);

if (isset($_GET["continent"])) {
    $response = array(
        "country" => array_keys($data[$_GET["continent"]]),
        "city"    => array()
    );
    echo json_encode($response);
    exit;
}
if (isset($_GET["country"])) {
    foreach ($data as $continent => $countries) {
        foreach ($countries as $country => $cities) {
            if ($country == $_GET["country"]) {
                echo json_encode(array("city" => $cities));
                exit;
            }
        }
    }
}
echo json_encode(new stdClass());
exit;
Die ajax.php muss entsprechend angepasst werden und könnte Daten natürlich anhand der $_GET-Parameter aus der Datenbank auslesen. Rückgabe (echo/print) muss allerdings ein JSON-String sein, der als Schlüssel den <select>-Namen enthält und dessen Wert eine Liste der <option> Werte ist. Ein minimaler Umbau wäre nötig, um statt einem Option-Label auch noch ein Option-Value zu übergeben.

Die neueste JQuery-Version gibts hier:
jQuery: The Write Less, Do More, JavaScript Library
Die wird für den AJAX-Request benötigt (siehe <head><script ..>).
Geändert von nikosch (14.12.2009 um 20:40 Uhr). Grund: php-tags
Chriz ist offline   Mit Zitat antworten
Alt 11.02.2010, 21:16  
Neuer Benutzer
 
Registriert seit: 11.02.2010
Beiträge: 1
PHP-Kenntnisse:
Anfänger
knappoleon befindet sich auf einem aufstrebenden Ast
Standard
hallo,

ich habe mir mal die ajax variante angeschaut und so übernommen aber leider funktioniert sie bei mir nicht. ich habe die aktuelle jquery version eingebunden und den script-tag entsprechend angepasst. nach änderung des ersten drop-down feld passiert einfach nichts.

muss ich da noch was anpassen damit es funktioniert?

danke und gruß
knappoleon ist offline   Mit Zitat antworten
Alt 11.02.2010, 21:38  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.069
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard
Hallo,

PHP sollte auf dem Server laufen, welche Fehlermeldung bekommst du denn vom JavaScript? Lad dir dazu mal Firebug für Firefox (Addon) runter, der kann auslesen, was als AJAX-Antwort zurückkam. Alternativ mal die ajax.php selbst im Browser aufrufen (mit entsprechenden Parametern).

Falls das nichts hilft kannst du einen neuen Thread eröffnen, dann seh ich mal genauer rein.
Chriz ist offline   Mit Zitat antworten
Alt 27.03.2010, 13:18  
Neuer Benutzer
 
Registriert seit: 27.03.2010
Beiträge: 2
PHP-Kenntnisse:
Anfänger
bipi befindet sich auf einem aufstrebenden Ast
Standard
Würde jetzt gerne bei diesem Beispiel am Ende wenn man auf "GO" klickt auf jeweils eine unterschiedliche URL verweisen, wie könnte ich das am besten anstellen? vielen dank

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: "Bundesliga", options: [
                    { value: "A1-B1", text: "FC Bayern München", options: [
                        { value: "A1-B1-C1", text: "Philipp Lahm" },
                        { value: "A1-B1-C2", text: "Bastian Schweinsteiger" },
                        { value: "A1-B1-C3", text: "Mario Gomez" }
                    ] },
                    { value: "A1-B2", text: "SV Werder Bremen", options: [
                        { value: "A1-B2-C1", text: "Hugo Almeida" }
                    ] },
                    { value: "A1-B3", text: "Hertha BSC Berlin" },
                    { value: "A1-B4", text: "TSG Hoffenheim 1899", options: [
                        { value: "A1-B4-C1", text: "Timo Hildebrand" },
                        { value: "A1-B4-C2", text: "Carlos Eduardo" }
                    ] }
                ] },
                { value: "A2", text: "Champions-League", options: [
                    { value: "A2-B1", text: "Real Madrid" },
                    { value: "A2-B2", text: "Manchester United", options: [
                        { value: "A2-B2-C1", text: "Berbatow, Dimitar" }
                    ] }
                ] },
                { value: "A3", text: "Europa-League", options: [] }
            ];

            // 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">- make a choice -</option>
                </select>
                &raquo;
                <select name="selectElement[]" onchange="MultiSelect.changeOption(this)" disabled="disabled">
                    <option value="0">- make a choice -</option>
                </select>
                &raquo;
                <select name="selectElement[]" onchange="MultiSelect.changeOption(this)" disabled="disabled">
                    <option value="0">- make a choice -</option>
                </select>
                &raquo;
                <input type="submit" id="submitButton" value="go" disabled="disabled" />
            </div>
        </form>
        <pre id="events"></pre>
    </body>
</html>
bipi ist offline   Mit Zitat antworten
Alt 27.03.2010, 13:58  
Neuer Benutzer
 
Registriert seit: 27.03.2010
Beiträge: 2
PHP-Kenntnisse:
Anfänger
bipi befindet sich auf einem aufstrebenden Ast
Standard
könnten sowas in die Richtung bei submit funktionieren?

Code:
 <INPUT TYPE="submit" id="submitButton"  value="GO" disabled="disabled"
 onClick="top.location.href=this.form.URLs.options[this.form.URLs.selectedIndex].value">
nur funktionierts eben nicht!
bipi ist offline   Mit Zitat antworten
Alt 08.04.2010, 11:10  
Neuer Benutzer
 
Registriert seit: 08.04.2010
Beiträge: 1
PHP-Kenntnisse:
Fortgeschritten
mastermussi befindet sich auf einem aufstrebenden Ast
Standard
Hallo Zusammen,
ich habe die hier geposteten Scripts mal getestet.
Die HTML-Variante funktioniert bei mir soweit, nur leider die PHP-Variante nicht.
Obwohl ich jQuery 1.3.2 und auch die neuste ausprobiert habe...

Aber vielleicht könnt ihr mir auch bei der HTML-Variante weiterhelfen. Ich möchte gerne die Daten aus den Dropdowns verwerten. Ich weiß nur leider überhaupt nicht wie. Die Dropdowns haben ja alle den namen "selectElement[]"...Da kann ich ja per PHP nicht drauf zugreifen, wenn das Formular abgeschickt wurde...

Ich habe eigentlich vor, euer Script in einem PopUp laufen zu lassen, wo man die Auswahl treffen kann in den Dropdowns und dann auf nen Button klickt und die Daten dann in dem Hauptfenster in ein Textfeld übertragen werden....

Könnt ihr mir da Helfen????
mastermussi ist offline   Mit Zitat antworten
Alt 08.04.2010, 16:07  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 34.248
PHP-Kenntnisse:
Fortgeschritten
nikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz seinnikosch kann auf vieles stolz sein
Standard
Zitat:
Da kann ich ja per PHP nicht drauf zugreifen, wenn das Formular abgeschickt wurde...
Doch. Das sind PHP-Grundlagen. print_r($_POST);


http://www.php.de/php-einsteiger/489...rundlagen.html
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 16.09.2010, 12:33  
Neuer Benutzer
 
Registriert seit: 16.09.2010
Beiträge: 1
PHP-Kenntnisse:
Anfänger
limpstar befindet sich auf einem aufstrebenden Ast
Standard
Hallo Forum User,

auf der Suche nach einem geeigneten Script bin ich auf dieses Forum, genauer gesagt auf diesen Thread gestossen. PHP mässig habe ich einige Grundkenntnisse, wenn es um Javascript geht bin ich jedoch überfordert. Das Script vom ersten Post funktioniert einwandfrei, nun wollte ich aber fragen, wie ich es umschreiben müsste, damit nach der ersten Auswahl in eine <textarea> eine definierte Angabe gemacht wird. Also z.B. wenn ich zuerst Bundesliga auswähle, dass dann in einer textarea etwas steht (eben z.B. die Namen oder so) und wenn ich Champions League wähle, dass dann in der textarea der hierfür bestimmte Text steht.

Freundliche Grüsse
flo
limpstar ist offline   Mit Zitat antworten
Antwort
Seite 3 von 3 < 12 3

« PHP: Formular Generator | [Erledigt] MySQL-Datenbank durchsuchen »

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

LinkBacks (?)
LinkBack to this Thread: http://www.php.de/tutorials/43433-html-javascript-verschachtelte-auswahlfelder.html
Erstellt von For Type Datum
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 23:14
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 22:50
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 22:49
HTML/JavaScript: Verschachtelte Auswahlfelder - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign) This thread Refback 27.03.2010 22:45
Ajax Drop Down Box? - Forum: phpforum.de This thread Refback 25.12.2009 22:44
Ajax Drop Down Box? - Forum: phpforum.de This thread Refback 25.12.2009 14:57
Ajax Drop Down Box? - Forum: phpforum.de This thread Refback 25.12.2009 13:07
Produktselektor - Forum: phpforum.de This thread Refback 15.12.2009 08:53
Produktselektor - Forum: phpforum.de This thread Refback 15.12.2009 02:34
Produktselektor - Forum: phpforum.de This thread Refback 14.12.2009 21:13
Produktselektor - Forum: phpforum.de This thread Refback 14.12.2009 20:23
Dynamische <SELECT> Form - Forum: phpforum.de This thread Refback 09.12.2009 07:33
select auswahl ändert values des 2.selectfeldes - Forum: phpforum.de This thread Refback 07.12.2009 04:09
select auswahl ändert values des 2.selectfeldes - Forum: phpforum.de This thread Refback 04.12.2009 11:29
HTML/JavaScript: Verschachtelte Auswahlfelder - php.de This thread Refback 16.10.2009 15:06
php.de - das Deutsche PHP-Forum This thread Refback 29.05.2009 02:23

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
JS Verschachtelte Auswahlfelder loki0815 HTML, Usability und Barrierefreiheit 2 26.06.2008 18:52
verschachtelte Rubriken ausgeben / alle anzeigen prinzli PHP Tipps 2008 3 25.02.2008 22:37
Verschachtelte JOINs ... Ergebnis abziehen ... tomfrit Datenbanken 2 10.12.2007 08:14
Verschachtelte DB-Anfrage richtig? Bart Datenbanken 1 21.05.2006 18:58
[CSS] Verschachtelte Div Container - Breite anpassen I-Spy HTML, Usability und Barrierefreiheit 7 14.05.2006 11:51
Verschachtelte Abfrage über mehrere Tables hinweg? php_frage Datenbanken 9 29.04.2006 19:55
Verschachtelte Includes FoXyLiOn PHP-Fortgeschrittene 3 12.02.2006 15:24
Verschachtelte Datenbankabfrage - wie fange ich an? PHP Tipps 2007 9 02.02.2006 11:09
verschachtelte Abfrage PHP Tipps 2005-2 12 20.08.2005 20:28
verschachtelte if-else anweisung!? PHP Tipps 2005-2 7 04.08.2005 11:53
2 verschachtelte while Schleifen. Großes Performanceproblem Datenbanken 3 30.05.2005 12:52
verschachtelte MySQL-Abfrage PHP Tipps 2005 3 04.05.2005 12:44
[Erledigt] Auswahlfelder HTML, Usability und Barrierefreiheit 3 17.01.2005 10:31
[Erledigt] Verschachtelte Arrays ausgeben PHP-Fortgeschrittene 2 10.12.2004 11:29
2 verschachtelte Divlayer und der Firefox. Tutti HTML, Usability und Barrierefreiheit 2 26.07.2004 22:24

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
php datum auswahlfeld, http://www.php.de/tutorials/43433-html-javascript-verschachtelte-auswahlfelder-3.html, javascript multiselect auslesen, jquery auswahlfeld, php auswahlfeld onchange, auswahlfeld html, datum auswahlfeld html, html auswahlfeld onchange, php kontinent des besuchers auslesen, java auswahlfeld, html geschachtelte auswahl, verschalchtelte auswahlfelder java, auswahlfeld variablen wert zuweisen je nach select, javascript print php array value when html select element, verschachtelte select felder, js drop down auswahl entscheidung, javascript verschachtelte if, ajax verschachtelte auswahl, datum auswahlfeld javascript, verschachtelte auswahlfelder ajax

Alle Zeitangaben in WEZ +1. Es ist jetzt 16:47 Uhr.

php.de - Das deutsche PHP-Forum - Kontakt - Impressum - Forenregeln - Archiv - Nach oben



Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum

Creative Commons License
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.