Jquery - изменить <span>текст </span> с помощью раскрывающегося списка

Question

Это может быть легко, но я играю в JQuery и продолжаю получать ошибки!

По сути, у меня есть базовая функция JQuery 1.4+, которая обновляет входное значение - но теперь у меня сложныйвремя, чтобы понять, как также использовать JQuery для одновременного обновления текста в области, когда различные значения выбираются с помощью выпадающего селектора.Скрипт и HTML выглядят так:

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

Что я хочу добавить: при использовании выпадающего селектора я также хочу обновить значение в <span>$1.50</span>.Пример - при выборе значения «1» текстовая строка в span показывает $ 1,50; при выборе значения «2» в раскрывающемся списке текстовая строка показывает $ 3,00 (или что-то еще) и т. Д.с благодарностью!Спасибо!

Answer 1

Попробуйте это:

<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

Вы можете использовать функцию .html () после выбора диапазона, который хотите изменить, например:

$('span').html('$'+(x*1.5))

Answer 3

Я бы предложил добавить идентификатор в диапазон, а затем сделать что-то вроде этого:

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

Answer 4

Рабочий пример: 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);

    });
});

Я немного изменил ваш HTML (более понятные имена полей / идентификаторы), но вы должны понять основную идею.

Iтакже удалил ваше скрытое поле, так как не вижу смысла в дублировании данных.Выбранное вами значение из поля выбора уже будет отправлено на сервер, а затем у вас будет скрытое поле, которое делает то же самое.

Количество на стороне сервера можно получить с помощью ключевого слова itemQuantity_3 (в PHP $ _POST ['itemQuantity_3']).

Answer 5

Вы можете использовать функцию text () для установки или получения текста HTML-элемента (не работает с полями ввода!). Ваш пример кода может выглядеть так:

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

Answer 6

используйте метод html.

$('span').html("$1.50");