Question

例如，在this站点中，有3个SELECT元素（步骤1，步骤2和步骤3）。我可以使用selectElement.value = selectElement.options[i].value;更改第一个的值，但是当我更改它时，步骤2不会更新它的选项，就像我用鼠标选择它一样。有没有办法强迫它更新？

Answer 1

执行此操作的最佳方法是使用更新第二个选择框内容的函数，并在更新第一个选择框的值时调用该函数。然后，您的第一个选择框上有一个change处理程序（或一个click处理程序或一个计时器;取决于您对UX的偏好），当它的值发生变化时，它会调用该函数。例如。（近伪代码）：

<select id='box1' onchange='fillBox2();'>...</select>
<select id='box2'>...</select>
<select id='box3'>...</select>

function setValueInBox1(val) {
    var box1 = document.getElementById('box1');
    box1.value = val;
    fillBox2();
}

因此，事件和你的逻辑调用相同的例程fillBox2。

人们经常尝试触发box1（上面的change事件）的实际事件处理程序，但这可能很难且容易出错。通过使用两者您的逻辑可以调用的事件处理程序和的公共函数，可以避免该问题。

如果无论出于何种原因上述情况是不可能的，如果您在IE中专门执行此操作并且不担心跨浏览器行为（来自您的评论），您可能会查看fireEvent方法。对于其他浏览器，您可以查看DOM dispatchEvent方法。

Answer 2

好吧，你总是可以调用像

这样的方法

document.getElementById('x').onchange();

，其中'x'是选择元素的id

使用JavaScript模拟选择中的更改选项？

2 个答案: