Ankündigung

Einklappen
Keine Ankündigung bisher.

HTML/JavaScript: Verschachtelte Auswahlfelder

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • #16
    Huhu,

    ich habe mal ne Frage, in diesem Code sind es ja zwei Auswahlfelder, kann man das auch mit drei machen ?

    Also z.B. so:

    Bitte ein Bundesland wählen:
    NRW
    Schleswig...

    [disabled] Bitte zuerst ein Bundesland wählen
    Neuss
    Düsseldorf
    Essen

    [disabled] Bitte zuerst eine Stadt wählen
    40522
    40521
    40512

    Das heißt man muss erst das 1. Feld auswählen, dann das 2. und dann kann erst das dritte ausgewählt werden.... Wie kann man soetwas realisieren ?

    Vielen Dank LG
    TheMan

    Kommentar


    • #17
      Lass mich raten, DU willst die komplette Lösung?
      --

      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


      --

      Kommentar


      • #18
        Hallo,
        es wäre schön, wenn einer der Moderatoren den Beitrag oder Titel so aktualisieren könnte, dass der Thread als veraltet erkenntlich wird. Ich würde keinem mehr raten, verschachtelte Auswahlfelder auf diese Weise zu schreiben.
        "Mein Name ist Lohse, ich kaufe hier ein."

        Kommentar


        • #19
          Begründung?
          --

          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


          --

          Kommentar


          • #20
            Weil die Daten üblicherweise viel dynamischer sind als dass man "allen" Kombinationsmöglichkeiten direkt ins JS schreibt und deshalb besser und wahrscheinlich auch einfacher aus der Datenbank holt, da bietet ja mittlerweile fast jedes AJAX-Framwork soetwas an.

            Kannst es auch so lassen, werd aber keinen Support mehr hierfür liefern.
            "Mein Name ist Lohse, ich kaufe hier ein."

            Kommentar


            • #21
              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
              "Mein Name ist Lohse, ich kaufe hier ein."

              Kommentar


              • #22
                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 ..>).
                "Mein Name ist Lohse, ich kaufe hier ein."

                Kommentar


                • #23
                  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ß

                  Kommentar


                  • #24
                    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.
                    "Mein Name ist Lohse, ich kaufe hier ein."

                    Kommentar


                    • #25
                      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>

                      Kommentar


                      • #26
                        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!

                        Kommentar


                        • #27
                          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????

                          Kommentar


                          • #28
                            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
                            --

                            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                            Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                            --

                            Kommentar


                            • #29
                              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

                              Kommentar

                              Lädt...
                              X