Блог

Главная - Вопросы по программированию - Выбор нескольких параметров и значений из одного выпадающего списка

Выбор нескольких параметров и значений из одного выпадающего списка

#javascript #html

#javascript #HTML

Вопрос:

Я работаю над формой с несколькими раскрывающимися параметрами.

Я разделил все до трех вопросов в форме ниже, чтобы проиллюстрировать свою проблему.

Я пробовал этот код (и несколько вариантов):

 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 должен быть установлен на «нет» и доступен только для чтения. Я ожидал, что вопрос 3 также будет обновляться автоматически при выборе «нет» в ответ на вопрос 1, но эта функция, похоже, игнорируется.

Ответ №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);
  }
}