如何以编程方式从控件自己的更改事件中更改选择框选择并使其在移动浏览器中工作

Posted 2023-05-08

【中文标题】如何以编程方式从控件自己的更改事件中更改选择框选择并使其在移动浏览器中工作

【英文标题】：How can I programmatically change a select box selection from within the control's own change event and have it work in mobile browsers

【发布时间】：2013-10-15 16:03:14

【问题描述】：

考虑以下简化的 html 和 jQuery 代码：

<select id="select1">
  <option value="10">10</option>
  <option value="5">5</option>
  <option selected="selected" value="1">1</option>
</select>

$('#select1').change(function () 
 if ($('#select1').val() > 5) 
   $('#select1').val(1);
   alert("Select set to 1");
 
);

fiddle

如果用户从选择控件中选择 10，它会在控件自己的更改事件中重置为 1。这适用于我台式机上的浏览器，但不适用于 iPhone 或 iPad 上的 Chrome 或 Safari。 （实际上在移动浏览器上选择设置为 1，然后返回 10）

基本上，我试图限制用户在某些条件下可以选择的内容。

有没有办法从它自己的更改事件中重置选择控件上的选项，并让它在移动浏览器中工作？

【问题讨论】：

哼...所以你想做同样的事情但使用其他事件？

你是这个意思吗？ jsfiddle.net/Palestinian/BJJ9D/10 或这个jsfiddle.net/Palestinian/BJJ9D/11

【参考方案1】：

您需要选择option，例如通过[value=1] 或给它一个类.default。

$('#select_id').val(1);

然后刷新.selectmenu('refresh')进行重新增强。

$('#select_id').selectmenu('refresh');

Demo 1 - Demo 2

【讨论】：

这行得通，但是你知道没有 jQuery Mobile 库的方法吗？

@MikeHeffelfinger 您上面的代码适用于 jQuery 但没有 jQuery Mobile。但是，如果您加载了 jQM，它将无法工作。