Werte mehrerer Selekt-Elemente mit JSON versenden
JavaScript (jQuery, JSON)

Es wird eine Lösung zum Thema jQuery UI MultiSelect Widget auf tutorials.de aufgezeigt.

Problemstellung

Es sollen die die Werte von mehreren Selekt-Elementen, in denen eine multiple Auswahl möglich ist, mittels der ajax-Methode aus dem jQuery-Framework versendet werden. Zudem findet das JSON-Script zum Serialisieren des Objektes Verwendung.

Lösung

Auf der Serverseite sollen die Selekt-Elemente getrennt bearbeitet werden. Aus diesem Grund werden die IDs der Selektgruppen als Schlüssel des Objekts verwendet.

Einer Funktion werden in einem Array die IDs der Selektgruppen übergeben
In der Funktion werden die Arrays der ID als Eigenschaft einem Objekt zugewiesen
Das Objekt wird mit der Methode stringify in ein JSON-Objekt überführt

Beispiel

In beiden Selekt-Gruppen können jeweils zahlreiche Optionen markiert werden. Mit der Schaltfläche wird die Auswahl an den Server gesendet und der REQUEST-String unbearbeitet zurückgegeben.

Beispiel isoliert

Quellcode (HTML)

Grundlage ist nachfolgendes HTML-Dokument.

HTML:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="json2.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
function testIt(arrSel){
  var objAll = {};
  for(strKey in arrSel){
    $.extend(
      objAll,
      (function(key, val){
        var obj = {};
        obj[key]=val;
        return obj;
      })(arrSel[strKey], $('#'+arrSel[strKey]).val())
    );
  }

  $.ajax({
    url: 'myside.php',
    data: {'selectednumbers':JSON.stringify(objAll)},
    type: 'POST',
    success: function(data) {
      alert(data);
    }
  });
}
 //-->
</script>
</head>
<body>
<button onclick="testIt(['example','example1']);">testIt</button>
<select id="example" name="example" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>
<select id="example1" name="example" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>
</body>
</html>

Quellcode (Serverseite, PHP)

Auf der Serverseite wird lediglich das übergebene REQUEST-Array ausgegeben.

PHP:

<?php
  var_dump($_REQUEST['selectednumbers']);
?>

Werte mehrerer Selekt-Elemente mit JSON versendenJavaScript (jQuery, JSON)