Jquery - ändern <span>text</span> mit der dropdown-Selektor

Könnte dies einfach sein, aber ich bin ein JQuery dunce und bekomme immer Fehler!

Grundsätzlich habe ich ein basic JQuery 1.4+ Funktion, dass updates eine Eingabe - aber jetzt bin ich eine harte Zeit, herauszufinden, wie auch JQuery verwenden, um gleichzeitig zu aktualisieren, einen text in den Bereich, wenn Sie verschiedene Werte ausgewählt werden, die mit einer dropdown-Auswahl. Das Script und die HTML sieht wie folgt aus:

JS:

$(function() {
  $('#mycups3').change(function() {
    var x = $(this).val();

    $('#myhidden3').val(x);
  });
});

HTML:

<form action="" method="post">
  <input type="hidden" id="myhidden3" name="quantity" value="1" />
  <input type="submit" name="submit" class="button" id="" value="Button" />
  <select id='mycups3'>
    <option value='1'>1 Item</option>
    <option value='2'>2 Items</option>
    <option value='3'>3 Items</option>
  </select>
  <span>$1.50</span>
</form>

Was möchte ich hinzufügen:
Bei Verwendung der dropdown-selector, ich möchte auch den Wert in der <span>$1.50</span> zu aktualisieren. Beispiel - Auswahl einen Wert von " 1 " bewirkt, dass der text-string in span zeigen $1.50 - Auswahl einen Wert von '2' in der dropdown-macht den text-string zeigen, $3.00 (oder was auch immer) etc!!!

Jegliche Hinweise sind wir sehr dankbar! Danke!

Ich sah ein paar Vorschläge, wo Menschen sich der Wert des dropdown-und multiplizieren Sie ihn mit 1.5 verwenden Erinnern parseInt() auf x vor der Verwendung in einem Ausdruck. Verwendung - parseInt(x) || 0 - 0 ist Ihre fallback, wenn x nicht analysiert (Nan zurück)

InformationsquelleAutor Jamison | 2011-04-11

Versuchen Sie dies:

<script type='text/javascript'>     
    $(function() {         
        $('#mycups3').change(function() {             
            var x = $(this).val();             
            $('#myhidden3').val(x);         
            $(this).next("span").text("$" + (x * 1.5).toFixed(2));
        });     
    }); 
</script>

Ja! Das war ein guter Weg, es zu tun. Nur eine Frage, obwohl - im Fall, dass das Ergebnis $4.5 - how, um sicherzustellen, dass eine weitere " 0 " Hinzugefügt, um es für $4.50 ? Ich denke, es ist ein Formatierung Problem, also versuche ich zu Experimentieren mit .toFixed(); ?
Du hast Recht. Aktualisiert die post zu verwenden toFixed.

InformationsquelleAutor Chandu

3

Ich würde vorschlagen, das hinzufügen einer id zu der span dann sowas:
```
 $('#spanID').text($(this).val());
```
InformationsquelleAutor Munzilla
3

Könnten Sie die .html () - Funktion nach Auswahl der Zeitspanne, die Sie ändern möchten, z.B.:
```
$('span').html('$'+(x*1.5))
```
InformationsquelleAutor exactlee

Können Sie die text () - Funktion oder den text eines HTML-Elements (funktioniert nicht auf input-Felder!). Dein code-Beispiel könnte so Aussehen:

<script type='text/javascript'>
$(function() {
    $('#mycups3').change(function() {
        var x = $(this).val();
        $('#myhidden3').val(x);
        $('form span').text('$'+(x*1.5));
    });
});
</script>

InformationsquelleAutor markmywords

1

Beispiel: http://jsfiddle.net/peeter/fyFxp/
```
$(document).ready(function() {
    $('#itemQuantitySelect_3').change(function() {

        var itemPrice = 1.50;
        var itemQuantity = $(this).val();
        var quantityPrice = (itemPrice * itemQuantity).toFixed(2);

        $(this).next("span").html("$" + quantityPrice);

    });
});
```
Ich habe mich verändert Ihr HTML ein bisschen (mehr nachvollziehbar Feld-Namen/IDs ein), aber man sollte die Grundidee.

Ich auch entfernt Ihre versteckten Bereich, wie ich sehe keinen Sinn duplizieren von Daten. Ihre ausgewählten Wert aus der select-box wird bereits an den server geschickt werden und dann haben Sie ein verborgenes Feld, das genau das gleiche tut.

Können Sie die Menge der server-Seite mit dem keyword itemQuantity_3 (in PHP $_POST['itemQuantity_3']).

InformationsquelleAutor Peeter
0

verwenden Sie html-Methode.
```
$('span').html("$1.50");
```
InformationsquelleAutor Headshota

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Beispiel: http://jsfiddle.net/peeter/fyFxp/