从单个下拉框中选择多个选项和值

Question

我正在处理具有多个下拉选项的表单。我在下面的表格中将所有内容简化为三个问题，以说明我的问题。我已经尝试过此代码（以及一些变体）：function update_variables(el, standard_val, var_list) {  standard_val.value = var_list[el.getElementsByTagName('option')[el.selectedIndex].value];}var select2 = document.getElementById('think_question'),  hidden_answer = document.getElementsByName('thought_goes_here')[0];var why_options = {  'yes': '',  'no': 'Well, you tried.'};select2.addEventListener('change', function() {  update_variables(select2, hidden_answer, why_options);});var sel_group_control = document.getElementById('follower_question');var sel_free_will = document.getElementById('think_question');sel_group_control.addEventListener('change', answer_bypass);function answer_bypass() {  var user_choice = sel_group_control.value;  if (user_choice === 'no') {    sel_free_will.selectedIndex = 2;    sel_free_will.style.backgroundColor = "#D3D3D3";    sel_free_will.disabled = true;  }}<h2>Life Decisions</h2><form>  Be exactly like everone else?  <select id='follower_question'>    <option disabled selected value> -- select an option -- </option>    <option>yes</option>    <option>no</option>  </select>  <br> Think for yourself?  <select id='think_question'>    <option disabled selected value> -- select an option -- </option>    <option>yes</option>    <option>no</option>  </select>  <br> Original thought:<input name="thought_goes_here" size="50" value="" id="your_thoughts"></form>如果将问题2设置为“否”，则已知问题3的答案，并在其中填写回答。如果问题1为“否”，则问题2应设置为“否”且为只读。我希望在回答问题1时选择“否”时，问题3也将自动更新，但该功能似乎被忽略了。

Answer 1

您需要注册一个事件以触发第二个选择更改。

像这样：

function answer_bypass() {

  var user_choice = sel_group_control.value;

  if (user_choice === 'no') {

    sel_free_will.selectedIndex = 2;

    sel_free_will.style.backgroundColor = "#D3D3D3";

    sel_free_will.disabled = true;

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    select2.dispatchEvent(event);

  }

}