Wert aus ComboBox in Textfeld übergeben

H

Huseyin

New member
Hallo zusammen,

bin absoluter Anfänger in JavaScript. Ich möchte eine ComboBox so programmieren, dass man zum beispiel eine Ware auswählt und der entsprechende Preis in einem Editfeld angezeigt wird (noch besser wäre ein Label, aber das finde ich in JS nicht). Hier eine pseudo-JS, wie ich es haben will, aber wie macht man es wirklich?

Code: 
<select ID="combo" SIZE="1">
	<option value="S1"> Spielzeug 1
	<option value="S2"> Spielzeug 2
	<option value="S3"> Spielzeug 3
</select>

<Input type="Text" Name="Text1" Value="" size="20">
	
<script language="Javascript">
if Form1.Combo.value="S1"
then Text1.Value="200 EUR"
</script>

Ich hoffe, es ist klar, was ich suche. Würde mich über eine hilfreiche Antwort freuen. Danke.
(C++ ist doch etwas ganz anderes :D )

Gruß
Huseyin
 
Moin!

Ein kleines Beispiel:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<script type="text/javascript">
<!--
function blah(sel,ind){
if (sel.options[ind].value=="S1")document.Form1.Text1.value="200 EUR";
else document.Form1.Text1.value="";
}
//-->
</script>
</head>
<body onload="document.Form1.combo.selectedIndex=-1;">
<form name="Form1" action="#">
<select name="combo" onchange="blah(this,this.selectedIndex);">
<option value="S1"> Spielzeug 1</option>
<option value="S2"> Spielzeug 2</option>
<option value="S3"> Spielzeug 3</option>
</select>
<input name="Text1" value="" size="20">
</form>
</body>
</html>
Ahoi - Pit
 
Ich seh grad, Pit hat schon geantwortet, ich poste das jetzt trotzdem noch, da ich ja nur noch auf absenden klickern muss. ;)

HTML: 
<select  SIZE="1" onChange="displayPreis(this.options[this.options.selectedIndex].value)">
<option value="S1"> Spielzeug 1</option>
<option value="S2"> Spielzeug 2</option>
<option value="S3"> Spielzeug 3</option>
</select>

<Input type="Text" Name="Text1" Value="" size="20" id="preis">
<script type="text/javascript">
function displayPreis(item) {
   switch(item) {
      case 'S1':
         preis=200;
         break;
      case 'S2':
         preis=100;
         break;
      case 'S3':
         preis=300;
         break;
      default:
         preis=false;
   }
   if(preis) {
      document.getElementById('preis').value=preis+' EUR';
   }
}
</script>
 
Danke euch beiden, ich habe mir jetzt erst einmal Pits angeguckt. Anpassen usw. ist ja kein Problem, aber ich wills irgendwann auch mal wirklich verstehen. Ich werde dann nochmal nachfragen.

Wie schauts denn aus, wenn ich statt einem Editfeld, ein einfaches Textfeld nehmen will, also ein Label? (Benutzt man diese Begriffe in JS analog wie in z.B. C++?)

Gruß
Huseyin
 
In JS sind mir keine Labels bekannt. Ist schon ein Weilchen her dass ich was mit C++ zu tun hatte. Was sind denn dort Labels?

Bei input mit type="text" und Textareas kannst Du einfach auf den value zugreifen: obj.value wie es auch in Pit's und in meinem Beispiel bei der Ausgabe des Preises geschieht.

Wenn Du Dich damit näher befassen willst: Du kannst alle Elemente einer Seite über das Document Object Modell ansprechen, also objekt.unterobjekt.noch_ein_unterobjekt.eigenschaft Eine Referenz für das DOM findest Du z.B. hier.
 
Huseyin schrieb:
(Benutzt man diese Begriffe in JS analog wie in z.B. C++?)
Zum Vergrößern anklicken....
Genaugenommen gibt es diese Begriffe in C++ überhaupt nicht.
Wie diese Begriffe genannt werden ist abhängig von zusätzlichen Bibliotheken ala MFC, QT, OWL oder andere, wo diese Darstellungselemente dann tatsächlich erst enthalten sind. Im C++ Standard oder in der weit verbreiteten STL sind sie jedenfalls nicht verfügbar.
 
@Albu: Schon klar, aber zumindestens in den visuellen Entwicklungsumgebungen ala Borland gibts das ja Haufenweise - ist natürlich nichts C++-typisches, ich wollte nur wissen, ob es sowas im JS gibt.

@dms: Danke erstmal, schaut gut aus. Labels sind einfache Stringausgabefelder, also praktisch wie Editfelder, die man als Benutzer nicht editieren kann, reiner Output also.

Gruß
Huseyin
 
So, ich will jetzt extra dafür keinen neuen Thread eröffnen, verwandtes Problem (sry, dass ich euch so ausfrage, aber ich habe nicht den Nerv mir von Grund an JS beizubringen, später vielleicht mal):

Es sollen mehrer Auswahllisten darstehen mit vorgegebenen Einträgen. Der Benutzer wählt nun aus jeder Auswahlliste einen Eintrag aus. Natürlich gibt es etliche Kombinationen. Zu jeder einzelnen Möglichen Kombination gibt es einen Preis, der damm sofort im Textfeld ausgegeben wird. Also als Beispiel

-Kleidungsart
-Größe
-Qualität

Ich hatte mir das so vorgestellt, dass ich lauter if's habe für jede einzelne mögliche Kombination, das ist sicherlich sehr unschön, aber wohl nicht anders machbar und außerdem für mich auch als JS-Newbie leicht editierbar.

Wie sähe so etwas aus? Wäre nett, wenn mir jemand dieses mit einem Textfeld und zwei Auswahllisten (ComboBoxen) zeigen könnte, anpassen und noch mehr ComboBoxen hinzufügen schaffe ich dann hoffentlich selber.

Gruß
Huseyin
 
Zur Übersichtlichkeit würde ich sagen Du verwendest für den Preis ein attribut des Option-Tags. Du könntest das title-Attribut missbrauchen oder dir selbst eins ausdenken (dann ist es zwar kein gültiges Dokuemnt mehr, aber vlt. stört Dich das nicht).
Alternativ kannst Du den Preis ja auch noch in den value der Option schreiben, durch einen : getrennt vom eigentlichen Wert, damit Du die Nutzerauswahl auch noch auswerten kannst.
HTML: 
<html>
   <head>
      <script type="text/javascript">
      function displayPreis() {
         preis=0;
         for(i=0;i<document.getElementsByTagName('select').length;i++) {
            if(document.getElementsByTagName('select')[i].getAttribute('onchange')=='displayPreis()') {
               preis+=parseFloat(document.getElementsByTagName('select')[i].options[document.getElementsByTagName('select')[i].options.selectedIndex].value.split(':')[1]);
            }
         }
         document.getElementById('preis').value=preis+' EUR';
      }
      </script>      
   </head>
   <body>
      <form>
         <select  SIZE="1" onchange="displayPreis()">
            <option value="S1:200"> Spielzeug 1</option>
            <option value="S2:300"> Spielzeug 2</option>
            <option value="S3:400"> Spielzeug 3</option>
         </select>
         <select  SIZE="1" onchange="displayPreis()">
            <option value="S1:200"> Spielzeug 1</option>
            <option value="S2:300"> Spielzeug 2</option>
            <option value="S3:400"> Spielzeug 3</option>
         </select>
      <br />
      <input type="Text" Name="Text1" Value="" size="20" id="preis" />
      </form>   
   </body>
</html>
 
Hallo,

ich steige leider noch nicht durch. Ich verstehe den for-Teil nicht, ich brauche ihn nicht syntaktisch erklärt, was aber bewirkt er?
Und wie binde ich jetzt meine Preisliste ein? z.B. (als pseudocode)

if (Combo1 = "Spielzeug1" AND Combo2 = "Spielzeug2")
then textvalue=10EUR

und dann müsste ich eben für jede mögliche Kombination eine if schreiben (für meine anwendung eine reine fleißarbeit). wo kommt dieses if rein und wie überträgt sich der wert auf den textvalue? Wie gesagt; bin blutiger Anfänger, der eigentlich auch erstmal nur Anfänger bleiben will (weil nicht viel Zeit), was bedeutet also
"Zur Übersichtlichkeit würde ich sagen Du verwendest für den Preis ein attribut des Option-Tags."

Vielen Dank fürs erste
Huseyin
 
Zur for-Schleife: Diese Schleife geht alle select-Felder im Dokument durch. Bei 0, also dem ersten Feld wird begonnen. document.getElementsByTagName('select').length liefert die Anzahl der select-Elemente im Dokument zurück, in meinem Beispiel also 2.

Eigentlich brauchst Du an dem Beispiel was ich gepostet habe nichts mehr ändern, ausser die Preise selbst. Diese sind in dieser Version im Attribut value den einzelnen option-Tags hinterlegt.

<option value="S1:200"> Spielzeug 1</option>

200 ist der Preis für dieses Element.

So sind die Preise einfacher zu verwalten und Du musst nicht tausend if-Abfragen machen. Wenn sich ein Preis ändert oder eine neue Option hinzu kommt hast Du fast keinen Aufwand, da Du nichts am Code ändern musst.

Um mehr select-Felder hizuzufügen kannst Du einfach eins kopieren. Wichtig ist dabei nur dass der onchange-Handler enthalten ist und die einzelnen Optionen den Preis enthalten.
 
Achso, jetzt verstehe ich. Das wäre natürlich eine gute Idee, das dumme ist nur, dass es ohne if nicht geht, weil die Preise zu den Kombinationen nicht einer bestimmten Formel gehorchen und nicht die Einzelelemente einen bestimmten Preis haben, sondern nur die Kombination.

Daher muss ich jeder einzelnen Kombination einen Preis geben, anders geht es bei den Daten, die mir vorliegen, leider nicht. Könntest du mir so einen Fall mit ein oder zwei if-Abfragen programmieren, sodass ich dann nur noch die comboboxen + die entsprechenden neuen ifabfragen einfügen muss?

Gruß
Huseyin
 
Verstehe, schade... ;)

Ich geb Dir mal nen kurzen Crash-Kurs:

Eine "ComboBox" sprichst Du über document.getElementById(ID) an. ID musst Du hier austauschen mit dem im id-Attribut angegebenen Wert. Um den value der ausgewählten Option zu erhalten musst Du über den Index gehen. Den ausgewählten index erhältst Du über selectedIndex.

Um das ganze etwas übersichtlicher zu machen solltest Du eine eigene Funktion verwenden, z.B. diese:
Code: 
function ComboBoxValue(id) {
   element=document.getElementById(id);
   selectedOption=element.options[element.options.selectedIndex];
   value=selectedOption.value;
   return value;
}
Dein Beispiel von oben
if (Combo1 = "Spielzeug1" AND Combo2 = "Spielzeug2")
then textvalue=10EUR
Zum Vergrößern anklicken....
könnte dann mithilfe der Funktion so aussehen:

Code: 
if (ComboBoxValue('combo1') == "Spielzeug1" && ComboBoxValue('combo2') == "Spielzeug2")
   document.getElementById('preis').value='10 EUR';

In den einzelnen <select>-Tags musst Du dann die ID hinterlegen, also z.B. <select ... id="combo1">

Und denk dran, Du überprüfst hier den value, das ist der Wert der im value-Attribut der <option>-Tags hinterlegt ist.
 
OK, hier nochmal im kompletten:
HTML: 
<html>
   <head>
      <script type="text/javascript">
      function ComboBoxValue(id) {
         element=document.getElementById(id);
         selectedOption=element.options[element.options.selectedIndex];
         value=selectedOption.value;
         return value;
      }
      
      function displayPreis() {
         if (ComboBoxValue('combo1') == "S1" && ComboBoxValue('combo2') == "S1")
            document.getElementById('preis').value='10 EUR';
         if (ComboBoxValue('combo1') == "S1" && ComboBoxValue('combo2') == "S2")
            document.getElementById('preis').value='11 EUR';
         if (ComboBoxValue('combo1') == "S1" && ComboBoxValue('combo2') == "S3")
            document.getElementById('preis').value='12 EUR';
         if (ComboBoxValue('combo1') == "S2" && ComboBoxValue('combo2') == "S1")
            document.getElementById('preis').value='13 EUR';
         if (ComboBoxValue('combo1') == "S2" && ComboBoxValue('combo2') == "S2")
            document.getElementById('preis').value='14 EUR';
         if (ComboBoxValue('combo1') == "S2" && ComboBoxValue('combo2') == "S3")
            document.getElementById('preis').value='15 EUR';
         if (ComboBoxValue('combo1') == "S3" && ComboBoxValue('combo2') == "S1")
            document.getElementById('preis').value='16 EUR';
         if (ComboBoxValue('combo1') == "S3" && ComboBoxValue('combo2') == "S2")
            document.getElementById('preis').value='17 EUR';
         if (ComboBoxValue('combo1') == "S3" && ComboBoxValue('combo2') == "S3")
            document.getElementById('preis').value='18 EUR';
      }
      </script>      
   </head>
   <body onload="displayPreis()">
      <form>
         <select  SIZE="1" onchange="displayPreis()" id="combo1">
            <option value="S1"> Spielzeug 1</option>
            <option value="S2"> Spielzeug 2</option>
            <option value="S3"> Spielzeug 3</option>
         </select>
         <select  SIZE="1" onchange="displayPreis()" id="combo2">
            <option value="S1"> Spielzeug 1</option>
            <option value="S2"> Spielzeug 2</option>
            <option value="S3"> Spielzeug 3</option>
         </select>
      <br />
      <input type="Text" Name="Text1" Value="" size="20" id="preis" />
      </form>   
   </body>
</html>
 
Hi, als kleine Vereinfachung kann man auch folgendes verwenden:
PHP: 
function ComboBoxValue(id) {
         return element=document.getElementById(id).value;
      }
 
Nicht wirklich. Ein select hat keinen value, zumindest nicht nach dem W3C und in Browsern die sich daran halten.
 
Seltsam, ich verwende das eigentlich immer und hab' bisher keine Probleme gehabt. Getestet mit MSIE 6.0, Opera8 und FF. Safari tut's anscheinend auch.

Wenn's nach dem W3C geht, sollte man da nicht auch dem Select ein "name"-attribut geben und dann über "document.forms[0].elements[selectName]" darauf zugreifen?

...ich will hier keinen Streit bzgl. W3C usw. anfangen. Es gibt aber eine Menge Dinge, die in allen aktuellen Browsern funktionieren und "noch" nicht in der W3C-Spezifikation sind. Beispiel: "innerHTML". Wenn ich etwas größeres dynamisch bauen will, nehme ich anstelle vieler createElement-Anweisungen doch lieber "innerHTML".
 
Moin!
dms schrieb:
Ein select hat keinen value, zumindest nicht nach dem W3C und in Browsern die sich daran halten.
Zum Vergrößern anklicken....
Mag sein, daß das laut w3c so ist, aber alle modernen browser gehen mit dem value eines selects so um, als wäre die korrekte option und ihr value referenziert. Der Kram mit der option.value-Referenzierung macht von daher nur Sinn, wenn der select-Tag nicht per id sondern als Element des form-Arrays referenziert wird. Da kommen dann auch die Browser mit klar, die einem select keinen value zuordnen können.

Greetz - Pit

P:S: Moin, Malleus
 
Nunja, interessante Expertengespräche, ich 0 verstehen :D - ist wohl auch zu spät für mich in die Welt der Websprachen und Skripte einzusteigen, wurscht.

@dns: Danke ! Früher oder später versuche ich es auch zu verstehen :D
Auf jeden Fall super, wie schnell und professionell man hier Hilfe bekommt, ist ja wie in Matheforen !

Gruß
Huseyin
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben