在这个页面，使用js修改select 选项,为什么页面无法正确响应change消息?

Question

网页在这里

https://zh.airbnb.com/host/ho...

select 是这个

我使用 $('#stacked-ui-header-wmpw-capacity').val('3').change() ,页面显示select改变了，但是实际上网页是没有响应的。

这个时候鼠标点一下这个select，或者是空白处，select的值就复原了。

正常响应的情况应该是这样的

我使用 document.querySelector('#stacked-ui-header-wmpw-capacity').selectedIndex = 1 一样是没有实际效果的。

换用
document.querySelector('#stacked-ui-header-wmpw-capacity').options[5].selected = true 这种的，一样是没有实际效果。

希望有过研究的大神可以解答一下原理哈。感谢。

正常情况下手动选择这个select，是与服务器有通信的，也就是说，select换了值，这个值应该是有响应的。
实际情况是，代码选的选项，是没有响应的，并且，手动点击select，值就被还原了。必须手动选择选项，才有正确的响应。

Answer 1

需要使用trigger来主动触发

$("select").trigger("change");

---

补充一点内容，下面做了一个例子

https://codepen.io/xboxyan/pe...

操作是，有一个select，然后我通过点击另一个按钮，让select切换

select本身也绑定了change事件，此时也会被触发

<select id="select">
        <option>111</option>
        <option>222</option>
        <option>333</option>
    </select>
    <button id="btn">切换</button>

$('#btn').click(function () {
    $('#select').val('333').trigger('change')
})

$('#select').on('change',function(ev){
    console.log(ev.target.value)
})

Answer 2

$("select option[value='3']").attr('selected',true).siblings().attr('selected',false)

Answer 3

大概的思路，要用 prop 方法：

$('#stacked-ui-header-wmpw-capacity option:eq(2)').prop('selected', true);

Answer 4

试试这样

$("#select_id ").get(0).selectedIndex=1

---

写了个例子，看看是不是你想要的效果

https://codepen.io/woaiacj201...

---

我测试没问题啊。可能是浏览器差异吧，这就没办法了。要针对性兼容吧

Answer 5

之前的回答是提供一个思路

$("#select option:selected").val('3').change()

Answer 6

这个下拉框有一个focus事件（绑定在document上的），把该事件删掉就正常了，说明是focus事件搞的鬼。楼主可以花时间研究下。时间有限，就不深究了，见谅。