Textfeld nach Dropdown Auswahl füllen

S

slsb02

Grünschnabel
Hallo,

ich bin auf der Suche, nach folgender Möglichkeit. Ich habe ein Dropdown, wenn dort ein Wert gewählt wird, soll in einem Textfeld der passende Text dazu ausgegeben werden.
Bin für jeden Hinweis dankbar...

Ich hatte im Web mal ein Beispiel gefunden, kann es aber leider nicht mehr finden...

Vielen Dank
slsb02
 
Hi,

versuch es mal so:
Code: 
<form>
  <select onChange="this.form.txtOut.value=this.options[this.selectedIndex].text;">
    <option value="t1">Text 1</option>
    <option value="t2">Text 2</option>
  </select>

  <input type="text" name="txtOut" value="Text 1" />
</form>
Ciao
Quaese
 
Hallo Quaese,

vielen Dank, für die schnelle Antwort, es sieht nicht schlecht aus aber mein Problem ist, dass in diesem Textfeld ein anderer Wert stehen muss.

D.h. Ich wähle eine Internetseite in einem Dropdown aus und möchte dann in dem Textfeld die passende URL sehen. Das Dropdown, kann aber an keiner Stelle die URL beeinhalten da alle vorhanden werte für php auswertungen gebraucht werden.

Das heißt, ich müsste das Dropwdown eine Funktion ansprechen lassen, die alle Werte in einem array speichert und das Textfeld müsste dann auf diese Werte zugreifen!?

Vielen Dank
slsb02
 
Hi,

Du hast Dir die passende Lösung doch schon überlegt. Du schreibst die entsprechenden URLs in ein Array.
Die Komponenten sprichts Du über den Index der jeweils gewählten Option an (selectedIndex).

Mein Vorschlag:
Code: 
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 arrURLs = ["", "www.tutorials.de", "www.test.de"];
function changeInput(objSel){
  objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];
}
//-->
</script>
</head>
<body>
<form method="post" action="">
  <select onChange="changeInput(this);">
    <option value="t1">- bitte auswaehlen -</option>
    <option value="t2">Tutorials.de</option>
    <option value="t3">Test</option>
  </select>
  <input type="text" name="txtOut" value="" />
</form>
</body>
</html>
Ciao
Quaese
 
Hallo Quaese,

bin gerade neu angekommen in diesem Forum und habe zu Deinem Script in diesem Thread folgende Frage:

Wie stelle ich es an, daß ich mehrere Select-Menues damit nutzen kann ?
Zur Verdeutlichung folgend meine modifizierte Version:
HTML: 
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 arrURLs = ["", "50", "90", "30", "25"];
function changeInput(objSel){
  objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];
}
//-->
</script>
</head>
<body>
<form method="post" action="">
  <select onChange="changeInput(this);">
    <option value="t1">- Arbeit bitte auswaehlen -</option>
    <option value="t2">Streichen</option>
    <option value="t3">Tapezieren</option>
  </select>
  <input type="text" name="txtOut" value="" />

<BR><BR>

  <select onChange="changeInput(this);">
    <option value="t1">- Farbe bitte auswaehlen -</option>
    <option value="t4">Grün</option>
    <option value="t5">Rot</option>
  </select>
  <input type="text" name="2txtOut" value="" />


</form>
</body>
</html>
Ich vermute der Knackpunkt liegt hier?

function changeInput(objSel){
objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];

txtOut habe ich im 2ten Menue bereits zu 2txtOut umbenannt, kann so aber nicht mehr gefüllt werden und konfliktet dann entsprechend mit dem ersten Menue. Was muss geändert werden, um diese beiden bzw. mehrere Menues "ans laufen zu bringen"

Freue mich über jede Hilfe und sage schonmal vielen Dank im Voraus, vG, Charli
 
Zuletzt bearbeitet von einem Moderator:
Hallo Charli,

nach fast 7 Jahren eine Frage dazu, ich find's klasse ;-)

Ich würde es vermutlich heute so machen:
PHP: 
<?xml version="1.0" encoding="iso-8859-1" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <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="//code.jquery.com/jquery-1.10.2.js"></script>
 <script type="text/javascript">
 <!--
 var arrURLs = new Array();
  arrURLs["t1"] = "";
  arrURLs["t2"] = "50";
  arrURLs["t3"] = "90";
  arrURLs["t4"] = "30";
  arrURLs["t5"] = "25";
 
  function changeInput(value, updateField){
   $("#"+updateField).val(arrURLs[value]);
  }
 //-->
 </script>
 </head>
 <body>
 <form method="post" action="">
 <select onChange="changeInput(this.value, 'txtOut');">
 <option value="t1">- Arbeit bitte auswaehlen -</option>
 <option value="t2">Streichen</option>
 <option value="t3">Tapezieren</option>
 </select>
 <input type="text" name="txtOut" id="txtOut" value="" />

 <BR><BR>

 <select onChange="changeInput(this.value, '2txtOut');">
 <option value="t1">- Farbe bitte auswaehlen -</option>
 <option value="t4">Grün</option>
 <option value="t5">Rot</option>
 </select>
 <input type="text" name="2txtOut" id="2txtOut" value="" />


 </form>
 </body>
 </html>
 
Hallo slsb02, vielen Dank für die schnelle Antwort.

Habe es gerade ausprobiert, aber leider werden die Zahlenwerte nicht in die txtOut - Felder übertragen.
P.S. "nach fast 7 Jahren eine Frage dazu, ich find's klasse" kennen wir uns ? Hatte mich gestern eigentlich schon gewundert, daß mein Username noch frei ist, vG, Charli
 
Hallo charli,

ich weiß nicht, ob wir uns kennen ;-)

Ganz wichtig im im <head> ist:
PHP: 
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

wenn du den ganzen Code kopierst, sollte es eigentlich keine Probleme geben... Ansonsten auch ruhig mal die Console für Fehler nutzen...

LG
 
Hallo slsb02, habe mir gerade die js - Datei runtergeladen damit ich es auch offline lokal testen kann. Funktioniert supergut, tausend Dank nochmal.

Wo diese Reise noch hingeht wirst Du dir als erfahrener Coder sicher denken können. Im nächsten Schritt werde ich versuchen die Werte der txtOut Felder zu addieren und die Gesamtsumme zu berechnen.
Das versuche ich aber zunächst selbst hinzubekommen.
Falls es Probleme gibt, darf ich dann nochmal auf Dich zurückkommen ?

vG und nochmals 100 Dank, Charli
 
charli,

sehr gerne!

Wenn etwas ist, Fragen dafür ist solch ein Forum ja da... Ich bin gespannt ob du die kleinen Tücken von Javascript erfolgreich umgehst ;-)

LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück