javascript - 填写表单的脚本比 onchange() 可以显示表单选项执行得更快

Question

我正在使用 Javascript 书签自动填写页面上的表单。给出的一些选项是下拉选择，根据使用 onchange() 选择的内容显示不同的选项。我有类似这样的代码:

/* Gets first drop down and sets value to first in list */
var dropDown1 = document.getElementById("dropDown1Name");
dropDown1.value = "option1InDropDown";
dropDown1.onchange();

/* Sets value of second drop down to option that is available when first option in first drop down is selected */
var dropDown2 = document.getElementById("dropDown2Name");
dropDown2.value = "optionRevealedByDropDown1Change";

但是这不起作用，因为当我将它设置为值时，onchange() 不会填充第二个下拉列表。当脚本完成执行时，dropDown2 中没有设置任何值。我已经尝试了几种使代码“等待”的方法，但我一直无法找到正确的解决方案。任何建议表示赞赏。

Answer 1

绑定(bind)第一个<select>与 input 类似于 change 的事件除了它立即触发。为了同步第一个<select>到第二个的值 <select>的选项和值使用 selectedIndex 事件处理程序中的属性。

片段

var s1 = document.getElementById('s1');
var s2 = document.getElementById('s2');

s1.addEventListener('input', function(e) {
  var idx = this.selectedIndex;
  var data = idx.value;
  s2.selectedIndex = idx;

}, false);

label {
  margin-left: 6ex;
}

<fieldset>
  <legend>Binding Input Event</legend>
  <select id='s1'>
    <option>---</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
  </select>

  <select id='s2'>
    <option>---</option>
    <option value='A'>A</option>
    <option value='B'>B</option>
    <option value='C'>C</option>
  </select>


</fieldset>