jquery - 设置下拉菜单的文本值不断重置

Question

我在页面中声明了以下 HTML:

<select class="js-basket-qty basketProduct__quantity basketProduct__dropdown">
  <option value="1">1</option> …
</select>

选项值变为 10。当您更改值时，select 语句中的类会触发许多事件。
事件都按预期工作，但没有发生的是选择中的文本没有保留。

例如默认情况下在选择中设置 1。然后我从下拉列表中选择 3。
3 get 被触发的事件使用，一瞬间我在选择器文本框中看到 3。但是，当它完成时，它会再次显示 1 而不是按住 3。

所以在事件结束时，我尝试使用 $('.basketProduct__dropdown').val(qty.toString()); 之类的内容将值设置为选定值

在我的函数顶部，我有:

var basketItem = getBasketItem($(event.currentTarget)),
    qty = parseInt(basketItem.find('.js-basket-qty').val(),10);
……
….
ajaxUpdateBasket({ 
….}).done(render);

$('.basketProduct__dropdown').val(qty.toString());

Answer 1

您的 ajaxUpdateBasket 方法可能是 asynchronous ，因此您需要在 select 函数的末尾设置 render 值。更像这样:

    var basketItem = getBasketItem($(event.currentTarget)),
        qty = parseInt(basketItem.find('.js-basket-qty').val(),10);
    ……
    ….
    ajaxUpdateBasket({ 
    ….}).done(render);

    function render(){
        ...some stuff
        $('.basketProduct__dropdown').val(qty.toString());
    }

请注意，您需要确保可以从 qty 内部访问 render()