✔ Selectfeld nach Auswahl verändern?

U

unrealzero_php

Erfahrenes Mitglied
Hallo zusammen

Erstelle gerade ein Script, bei welchem ich zwei Select-Felder habe. Das erste Selectfeld soll alle Kantone (CH) auflisten. Sobald ich einen dieser Kantone auswähle, sollen im zweiten Selectfeld die dazugehörigen Gemeinden angezeigt werden. Alle Daten liegen in einer Datenbank. Wie muss ich vorgehen bzw. habt ihr ein entsprechendes Script?! Hab' bereits erfolglos gegooglelt..
 
Hi,

eine Möglichkeit bietet Dir dafür AJAX. Dazu solltest Du hier genug Threads finden - hier z.B. wurde ein ähnliches Problem
diskutiert.

Ciao
Quaese
 
Quaese hat gesagt.:
Hi,

eine Möglichkeit bietet Dir dafür AJAX. Dazu solltest Du hier genug Threads finden - hier z.B. wurde ein ähnliches Problem
diskutiert.

Ciao
Quaese
Zum Vergrößern anklicken....

Danke soweit hab' ich es nun hinbekommen. Nun stellt sich mir ein weiteres Problem: das zweite Select-Feld wird erst angezeigt, wenn ich bereits eine auswahl beim ersten getroffen habe. Wo was muss ich noch ändern damit als Standard-Wert "- wählen -" gezeigt wird? Anbei mein Code...

Code: 
var resObjekt;
if(navigator.appName.search("Microsoft") > -1)
{
 //resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
 resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
else
{
 resObjekt = new XMLHttpRequest();
}
function sndReq()
{
 for(i=0;i<=26;i++)
 {
  if(this.document.f.kanton.options[i].selected)
  {
   resObjekt.open('get','laender.php?wo='+i,true);
   resObjekt.onreadystatechange = handleResponse;
   resObjekt.send(null);
   break;
  }
 }
}
function handleResponse()
{
 if(resObjekt.readyState == 4)
 {
  document.getElementById("hs").innerHTML = resObjekt.responseText;
 }
}

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<body>
<br />
<script language="JavaScript" src="gemeinden.js"></script>
<form name="f" action="test.php" method="post">
 <select name="kanton" size="1" onClick="sndReq()">
  <option value="0">- wählen -</option>
  <?php
   $res = mysql_query("SELECT id,kanton FROM tbl_kantone ORDER BY kanton ASC");
   while($dsatz = mysql_fetch_array($res))
   {
    $id = $dsatz['id'];
    $kanton = $dsatz['kanton'];
 
    echo '<option value="'.$id.'">'.$kanton.'</option>'; 
   }
  ?>
 </select>
  <span id="hs"></span>
 <input type="submit" />
</form>
</body>
</html>

PHP: 
<?php
 header('Content-type: text/html; charset=ISO-8859-1');
?>
<select name="gemeinde">
 <option value="0">- w&auml;hlen -</option>
<?php
 $ident = $_GET['wo'];
 
 $res2 = mysql_query("SELECT id,bezirk FROM tbl_bezirke WHERE kanton = '$ident' ORDER BY bezirk ASC");
 while($dsatz2 = mysql_fetch_array($res2))
 {
  $ident2 = $dsatz2['id'];
  $bezirk = $dsatz2['bezirk'];
 
  echo '<optgroup label="'.$bezirk.'">';
 
  $res3 = mysql_query("SELECT id,gemeinde FROM tbl_gemeinden WHERE bezirk = '$ident2'");
  while($dsatz3 = mysql_fetch_array($res3))
  {
   $id3 = $dsatz3['id'];
   $gemeinde = $dsatz3['gemeinde'];
   echo '<option value="'.$id3.'">'.$gemeinde.'</option>';
  }
 
  echo '</optgroup>';
 }
?>
</select>
 
Hi,

hoffentlich habe ich Dein Problem richtig verstanden.

Schreibe doch ein Select-Feld in den SPAN mit der ID hs, das nur die Option -wählen- enthält.
Wurde der AJAX-Request ausgeführt, wird sowieso das komplette Dropdown-Feld ersetzt.
Code: 
<span id="hs">
  <select name="gemeinde">
    <option value="0">- w&auml;hlen -</option>
  </select>
</span>
Ciao
Quaese
 
Jetzt funktionierts! Hab' zuvor den <select> über dem <span>-Container gehabt.

Wie so funktioniert das ganze lediglich im IE? mit new XMLHttpRequest(); sollte es doch auch in anderen Browsern funktionieren?

Code: 
if(navigator.appName.search("Microsoft") > -1)
{
 //resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
 resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
else
{
 resObjekt = new XMLHttpRequest();
}
 
Hi,

folgendes Konstrukt funktioniert bei mir in den gängigen Browsern:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 type="text/javascript">
  <!--
var resObjekt = null;

var strStart = "<select name=\"gemeinde\">\n<option value=\"0\">- w&auml;hlen -</option>\n</select>\n";

function makeRequest() {

    // Falls noch ein Request-Objekt existiert -> zunächst beenden
    if(resObjekt && resObjekt.readyState){
      resObjekt.abort();
      resObjekt = false;
    }

    if(window.XMLHttpRequest){ // Mozilla, Safari,...
      resObjekt = new XMLHttpRequest();
      if (resObjekt.overrideMimeType) {
        resObjekt.overrideMimeType('htm/html');
        // zu dieser Zeile siehe weiter unten
      }
    }else if(window.ActiveXObject){ // IE
      try{
        resObjekt = new ActiveXObject("Msxml2.XMLHTTP");
      }catch(e){
        try{
          resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){}
      }
    }

    if(!resObjekt){
      alert('Kann keine XMLHTTP-Instanz erzeugen');
      return false;
    }

    return true;
}


function sndReq(objSel){
  if(objSel.selectedIndex > 0){
    makeRequest();
    resObjekt.open('get','laender.php?wo='+objSel.selectedIndex,true);
    resObjekt.onreadystatechange = handleResponse;
    resObjekt.send(null);
  }else{
    document.getElementById("hs").innerHTML = strStart;
  }
}

function handleResponse(){
  if(resObjekt.readyState == 4){
    if (resObjekt.status == 200){
      document.getElementById("hs").innerHTML = resObjekt.responseText;
    }
  }
}
 //-->
</script>
</head>
<body>
<br />
<script language="JavaScript" src="gemeinden.js"></script>
<form name="f" action="test.php" method="post">
 	<select name="kanton" size="1" onchange="sndReq(this);">
	  <option value="0" selected="selected">- wählen -</option>
	  <?php
   $res = mysql_query("SELECT id,kanton FROM tbl_kantone ORDER BY kanton ASC");
   while($dsatz = mysql_fetch_array($res))
   {
    $id = $dsatz['id'];
    $kanton = $dsatz['kanton'];
 
    echo '<option value="'.$id.'">'.$kanton.'</option>'; 
   }
	  ?>
 	</select>

  <span id="hs">
    <select name="gemeinde">
      <option value="0">- w&auml;hlen -</option>
    </select>
  </span>
  <input type="submit" />
</form>
</body>
</html>
  • Das Request-Objekt wird nun bei jedem Ändern im Dropdown-Feld neu erstellt.
  • Den Event im Dropdown-Feld habe ich von onclick auf onchange geändert.
  • Der Funktion sndReq wird das Dropdown-Feld als Objekt übergeben (this)
  • Der gewählte Index wird direkt über selectedIndex ermittelt, nicht mehr über eine Schleife
Ich hoffe, das hilft Dir weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück