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

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);
  }
}