用 jquery 更改所选选项不起作用

Question

我的 HTML 是

<select class="form-select ajax-processed shipping-recalculation-processed" name="customer_profile_shipping[addressbook]" id="edit-customer-profile-shipping-addressbook"><option value="none">-- Choose --</option>
<option selected="selected" value="20">tehran-righthand</option>
<option value="39"></option>
</select>

我想尝试通过单击另一个 html 元素来更改选择的选项，我还提到了在此选择选项上设置的 ajax 并进行了更改， 我的目标是隐藏这个元素并根据点击我的 html 更改这个选择选项的值（然后应该在它之后触发 ajax）

(function($){
  //$('#edit-customer-profile-shipping-addressbook').hide();
  $('.user-profile-address').click(function(){
    var id=$(this).prop('id');
    $('#edit-customer-profile-shipping-addressbook option[value="'+id+'"]').prop("selected",true);
///also I try this , I check click event handle correctly and passed true id (etc 20,39,none_
  //$('#edit-customer-profile-shipping-addressbook ').val(id);
    $('#edit-customer-profile-shipping-addressbook').change();
    //console.log(id);
    //console.log($('#edit-customer-profile-shipping-addressbook').val());
  });

  })(jQuery);

我尝试了这段代码，选择选项的外观发生了变化，但是当检查元素时，我看到选择元素没有改变。

Answer 1

解决方案是（我应该在更改 id 后调用 .change）

  $('#edit-customer-profile-shipping-addressbook').val(id).change();