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

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() {&nbsp; var user_choice = sel_group_control.value;&nbsp; if (user_choice === 'no') {&nbsp; &nbsp; sel_free_will.selectedIndex = 2;&nbsp; &nbsp; sel_free_will.style.backgroundColor = "#D3D3D3";&nbsp; &nbsp; sel_free_will.disabled = true;&nbsp; &nbsp; // Create a new 'change' event&nbsp; &nbsp; var event = new Event('change');&nbsp; &nbsp; // Dispatch it.&nbsp; &nbsp; select2.dispatchEvent(event);&nbsp; }}