Jquery - change <span>text</span> with dropdown selector

Question

This might be easy, but I'm a JQuery dunce and keep getting errors!

Basically, I have a basic JQuery 1.4+ function that updates an input value - but now I'm having a hard time figuring out how to also use JQuery to simultaneously update a text in the area when different values are chosen with a dropdown selector. The Script and HTML looks like this:

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

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

<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>

What I want to add: When using the dropdown selector, I also want the value in the <span>$1.50</span> to update. Example - selecting a value of '1' makes the text string in span show $1.50 - selecting a value of '2' in the dropdown makes the text string show $3.00 (or whatever) etc!

Any clues are greatly appreciated! Thanks!

Answer 1

Try this:

<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> 

Answer 2

I would suggest adding an id to the span then doing something like this:

 $('#spanID').text($(this).val());