• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage "select" option selected - der neue Wert wird nicht angezeigt

H

huberlix

Neues Mitglied
In einem Dialog habe ich folgendes "Select":
HTML: 
<div data-role="content" id="Kassieren" class="Kassieren">
            <div  class="ui-grid-a">
               <div class="ui-block-a">
                  <form class="Kassierform" id="Kassierform" data-type="horizontal">
                    <select  name="Geld-Select" class="Select" ID="Geld-Select"  data-inline="true">
                        <option value="0.00">0,00</option>
                        <option value="0.40">0,40</option>   
                        <option value="0.80">0,80</option>   
                        <option value="1.20">1,20</option>   
                        <option value="1.60">1,60</option>   
                        <option value="2.00">2,00</option>   
                        <option value="2.40">2,40</option>   
.....
........
Angezeigt wird default natürlich 0,00.
Gleichzeitig gibt es in dem selben ="ui-block-a" noch einen "Label", der durch bestimmte Bedingungen verändert wird.
Die Änderungen passen zu den Select-Optionen.

Wird nun der Label geändert, soll auch der Select angepasst werden. Klappt auch mit folgendem Code:
Code: 
function selectoption()
{
    var sel = document.getElementById("Geld-Select");
    
   for (i=0; i < sel.options.length ; i++)
   {
       var Rechenwert=$( "#Kassierdialog .Kassieren .Betrag" ).text();
     if ( Rechenwert== sel[i].innerHTML )
     {
         sel.getElementsByTagName('option')[i].selected = 'selected';
         

           *******Hier muss ein Refresh passieren******
         break;
     }
   }
}

Per Schleife werden die Select-Optionen auf gleichheit mit dem Label kontrolliert. Bei einem Treffer wird diese Option "Selected".
Das funktioniert auch. Wenn ich im debugger anhalte und "Select" analysiere, wird mir z.B. bei 0,80 eben dieser Wert, und Index=2 angezeigt.

Aber die Anzeige im "Select" ist immer noch "0,00"!!!
Ich krieg den Select nicht "refreshed"
Ein sel.refresh wird mir nicht angeboten, bzw gibt Fehlermeldung.

Jemand ne Idee?
 
Werbung:
Vergiss deinen Code mal und erkläre genauer, was du erreichen willst. Die Vorauswahl eines Options-Feldes der Select-List in Abhängigkeit von was? Einer Checkbox, eines Radiobuttons, eines Strings? Ich verstehe nicht, was du mit Label meinst.
 
Werbung:
OK, ich versuchs nochmal detailierter:

mit foldendem HTML wird ein Dialog erstellt. Wie der Dialog aussieht, siehe Bild darunter:
HTML: 
 <div data-role="dialog" id="Kassierdialog" class="Kassierdialog" >         
         <div data-role="header" id="select-header" class="select-header" >Bezahlen</div>
        
         <div data-role="content" id="Kassieren" class="Kassieren">
            <div  class="ui-grid-a">
               <div class="ui-block-a">
                  <form class="Kassierform" id="Kassierform" data-type="horizontal">
                    <select  name="Geld-Select" class="Select" ID="Geld-Select"  data-inline="true">
                        <option value="0.00">0,00</option>
                        <option value="0.40">0,40</option>   
                        ....
                       ....
                        <option value="16.00">16,00</option>   
                        <option value="19.20">19,20</option>   
                        <option value="22.40">22,40</option>
                    </select>
                    
                     <div class="bezahlrichtung">
                        <select  name="bezahlrichtung" id="bezahlrichtung" class="bezahlrichtung" data-role="slider"  >
                           <option value="out">zahlen</option>
                           <option value="in">kassieren</option>
                        </select>
                     </div>
                     <div><label  id ="vonan" class="vonan">an</label></div>
                           <label for="bezahlrichtung" id ="Bezahler" class="Bezahler"></label>
                  </form>
                  <a href="#home" data-role="button"  Ident="Kassier-Button" data-inline="true">OK</a> 
                  <div class="betrag" ><label id ="Betrag" class="Betrag"  >0,00</label> </div>               
               </div>
            
               <div class="ui-block-b"  >
                  <div datarole="fieldcontain" id="Berechnung" class="Berechnung">
                     <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
                       <input name="checkbox-12-1" id="checkbox-12-1" type="checkbox" class="12-1" >
                       <label for="checkbox-12-1">12</label>
                       <input name="checkbox-12-2" id="checkbox-12-2" type="checkbox" class="12-2" >
                       <label for="checkbox-12-2">12</label>
                       <input name="checkbox-9-1" id="checkbox-9-1" type="checkbox" class="9-1">
                       <label for="checkbox-9-1">9</label>
                       <input name="checkbox-9-2" id="checkbox-9-2" type="checkbox" class="9-2" >
                       <label for="checkbox-9-2">9</label>
                     </fieldset>
                     <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                       <input name="checkbox-6-1" id="checkbox-6-1" type="checkbox" class="6-1">
                       <label for="checkbox-6-1">6</label>
                       <input name="checkbox-6-2" id="checkbox-6-2" type="checkbox" class="6-2" >
                       <label for="checkbox-6-2">6</label>
                       <input name="checkbox-3-1" id="checkbox-3-1" type="checkbox" class="3-1">
                       <label for="checkbox-3-1">3</label>
                       <input name="checkbox-3-2" id="checkbox-3-2" type="checkbox" class="3-2" >
                       <label for="checkbox-3-2">3</label>
                    </fieldset>
                       <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                       <input name="checkbox-nix-1" id="checkbox-nix-1" type="checkbox" class="nix-1">
                       <label for="checkbox-nix-1">nix</label>
                       <input name="checkbox-nix-2" id="checkbox-nix-2" type="checkbox" class="nix-2" >
                       <label for="checkbox-nix-2">nix</label>
                     </fieldset>
                     <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                       <input name="checkbox-t1" id="checkbox-t1" type="checkbox" class="t1">
                       <label for="checkbox-t1">T</label>
                       <input name="checkbox-t2" id="checkbox-t2" type="checkbox" class="t2">
                       <label for="checkbox-t2">T</label>
                       <input name="checkbox-t3" id="checkbox-t3" type="checkbox" class="t3">
                       <label for="checkbox-t3">T</label>
                    </fieldset>
                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                       <input name="checkbox-t4" id="checkbox-t4" type="checkbox" class="t4">
                       <label for="checkbox-t4">T</label>
                       <input name="checkbox-t5" id="checkbox-t5" type="checkbox" class="t5">
                       <label for="checkbox-t5">T</label>
                       <input name="checkbox-t6" id="checkbox-t6" type="checkbox" class="t6">
                       <label for="checkbox-t6">T</label>       
                     </fieldset>
                     <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
                       <input name="checkbox-Contra" id="checkbox-Contra" type="checkbox" class="Contra" data-theme="e">
                       <label for="checkbox-Contra">Co</label>
                       <input name="checkbox-Re" id="checkbox-Re" type="checkbox" class="Re" data-theme="e">
                       <label for="checkbox-Re">Re</label>
                       <input name="checkbox-Gegen" id="checkbox-Gegen" type="checkbox" class="Gegen" data-theme="e">
                       <label for="checkbox-Gegen">Gg</label>
                       </fieldset>
                     <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
                       <input name="checkbox-Hocke" id="checkbox-Hocke" type="checkbox" class="Hocke" data-theme="e">
                       <label for="checkbox-Hocke">Ho</label>                     
                       <input name="checkbox-Solo" id="checkbox-Solo" type="checkbox" class="Solo" data-theme="e">
                       <label for="checkbox-Solo">So</label>                           
                     </fieldset>
                  </div>                                 
               </div>
            </div>             
         </div>
Bezahldialog.jpg


Es gibt 2 Bezahlmöglichkeiten:
Über die rechten Tasten (eine Art Rechner),
Oder oben links über den "Select".
Die rechten hellen Tasten sind nur 10 Ct Zähler, während die gelben Tasten jeweils Verdoppler sind.
Das Ergebnis wird dan in dem blauen Label dargestellt

Nun soll das Select upgedatet werden, wenn der Label sich ändert.
Das funktioniert auch soweit, dass sich der Select.Value, bzw der Index ändert. Das kann ich im Debugger nachvollziehen.

Leider wird die "Anzeige" des Select nicht geändert. Die bleibt auf 0,00 stehen, obwohl der Select.Value auf 1,20 steht.

Ich schätze mal, dass ich den Code zum falschen Zeitpunkt ausführe (Pageshow)
Wie kann ich Select zwingen, den neuen Wert anzuzeigen.
Ein refresh(), hide()/show() scheints dafür nicht zu geben

Code: 
$(document).on( "pageshow", "#Kassierdialog",function(event)
{   
    var Betrag=0;
    var Finger=0;
    var doppler=1;

/* Der erste helle Button (Checkbox). Die anderen sind Identisch. Habe ich rausgelöscht, sonst wirds hierzu unübersichtlich */
    
   $("#Berechnung .12-1").change(function()  
   {
        if(this.checked)
        {
           Finger++;
           $( "#Kassierdialog .Kassieren .Betrag" ).text(Finger);
        }
        else
        {
           Finger--;
           $( "#Kassierdialog .Kassieren .Betrag" ).text(Finger);
        }
    });
    
  
/* Der letzte gelbe Button (Checkbox). Die anderen sind Identisch. Habe ich rausgelöscht, sonst wirds hierzu unübersichtlich */

  
    $("#Berechnung .Solo").change(function()
   {
        if(this.checked)
        {
           doppler=doppler*2;

/* Derblaue Label wird angepasst */
           $( "#Kassierdialog .Kassieren .Betrag" ).text((Finger*doppler*0.2).toFixed(2).replace(".", ","));

/* Die funktion zum anpassen des Select wird aufgerufen */
           selectoption();
        }
        else
        {
           doppler=doppler/2;
           $( "#Kassierdialog .Kassieren .Betrag" ).text((Finger*doppler*0.2).toFixed(2).replace(".", ","));
        }
    });   
});

function selectoption()
{
    var sel = document.getElementById("Geld-Select");
    
   for (i=0; i < sel.options.length ; i++)
   {
/*Alle Select-Optionen in der Schleife mit dem Label vergleichen */
       var Rechenwert=$( "#Kassierdialog .Kassieren .Betrag" ).text();
     if ( Rechenwert== sel[i].innerHTML )
     {
/* Bei Treffer die Select-Option "Selectieren" */
         sel.getElementsByTagName('option')[i].selected = 'selected';
/*Wenn ich den Code hier anhalte, hat Select den Wert des blauen Label */         
         break;
     }
   }
}
 
OK, habs gefunden.
Hab während der Laufzeit das Element Select untersucht.
Das liegt dann Eingebettet in "ui-select" und da gibt es "ui-btn-text"

Und damit funktionierts:

$( "#Kassierdialog .Kassierform .ui-select .ui-btn-text" ).html('<span class="Select">'+Rechenwert+'</span>');
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben