在选择标记中获取更改后的选定值

Question

我必须去商店。 它几乎完成了，但是我坚持让客户更改产品购物车中的金额并让价格动态变化。

我制作了一个带有10个选项的选择标签，其中选择了选定的金额。 我希望用户能够单击选择，选择其他金额并在实时预览中计算价格。 但是我不知道如何选择所有选择标签，并在每个选项上放置一个click事件。

我这样尝试过：

<select class="st" name="">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
</select>

和我的jQuery：

var st = $('.st');

st.change(function(){
var str = "";
$( ".st option:selected").each(function() {
    str = $(this).text();
    console.log(str);
  });
})

但与此同时，我从每个选择标签中选择了一个。 我希望它只是安慰我单击过的选择标签中的选定对象。 我怎样才能做到这一点？

Answer 1

您可以通过执行以下操作直接获取当前<select>的值：

var st = $('.st');

st.change(function(){
    // $(this) references the current <select>
    console.log($(this).val());
})

Answer 2

您的循环将重新抓取每个.st ，而不是使用this以便它以单击的对象为目标。

st.change(function(){
    var str = "";
    $(this).each(function() {
        if ($(this).is(":selected")) { //add if check to see if option is selected
            str = $(this).text();
            console.log(str);
        }
    });
})

Answer 3

如果获取TEXT而不是VALUE，则以下代码会有所帮助：

$('select').on('change', function(e){
   console.log($(e.currentTarget).find(":selected").text())
})