• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

drop down list mit zusatz-info

P

Persianer

New member
Guten Abend Leute,
ich habe viel gesucht, ohne Erfolg, daher meine Hilferuf:

der user soll aus einer drop down list seine Strasse anclicken, dann soll in einem zweiten input(Text) die zugehörige PLZ erscheinen:

Ich lese Zeilen aus einer Datei ( STR.TXT), die z.B. so aussehen: 80333=Berliner Str.
Diese Zeile schlachte ich in zwei Teilen: "80333" und "Berliner Str."
Der Teil mit dem Strassennamen biete ich in einem drop_down_list an. Nach den Anclicken soll der erste Teil ( hier "80333" ) in einem zweiten Fenster erscheinen:

PHP: 
<?php
?>
<!DOCTYPE html>
<html>

<head>
    <title>Roads and more</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<form action="index.php" method="post" target="_top">

<input name="strliste" class="form-control" list="dieliste" id="roads" oninput="ZoneBestimmen()"/>
<datalist id="dieliste">

<?php
$datei ="STR.TXT" ;
$handler = fopen ($datei, "r");
while ( $Zeile= fgets ($handler, 1024)) {
    
      $teile = explode("=", $Zeile);
      $teile[1]= trim($teile[1]);
         echo "<option name=".$teile[0]."  data-value=".$teile[0]." id=\"opt\">".$teile[1]."</option>" ;
  }
echo "</datalist>";
fclose($handler);
echo "<input  type=\"text\" id=\"zone\" />";
 ?>

<script>
function ZoneBestimmen() {
  var option = document.querySelector('#opt');
   document.getElementById("zone").value= option.dataset.value  ;
}
</script>

Alles falsch?
 
Zuletzt bearbeitet von einem Moderator:
Du könntest das Select mit einem onchange Eventhandler belegen und darin per Ajax die PLZ vom Server holen.
In einem Forum ist es übrigens besser, nur den Code zu zeigen, der im Browser ankommt (Rechtsklick -> Quelltext anzeigen) anstatt noch das PHP mit bei zu mischen, wenn sich die Frage auf das JS, CSS oder HTML bezieht.
Das ist erstens übersichtlicher und verhindert zweitens Fehler, die auf dem Weg vom PHP Parser zum Browser noch auftreten können, die wie von hier aus nicht sehen können.
 
IDs müssen dokumentenweit eindeutig sein... und einer <option> einen Namen zu geben ist nicht wirklich sinnvoll:
HTML: 
<!DOCTYPE html>
<html>

<head>
    <title>Roads and more</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<form action="index.php" method="post" target="_top">

<input name="strliste" class="form-control" list="dieliste" id="roads" oninput="zoneBestimmen(this.value)"/>
<datalist id="dieliste">
	<option value="Berliner Str." data-PLZ=80333>Berliner Str.</option>
	<option value="Frankfurter Ring" data-PLZ=80334>Frankfurter Ring</option>
	<option value="Am Tal" data-PLZ=80335>Am Tal</option>
</datalist>
<input  type="text" id="zone" />

<script>
function zoneBestimmen(value){console.log(value);
	var option = document.querySelector('#dieliste option[value="' + value + '"]');
	if (option){
		document.getElementById("zone").value= option.dataset.plz;
	}
}
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben