Вернуть CSS-класс обратно в исходный, когда выбран новый выбор в выпадающем меню - PullRequest
Новая
       7

Вернуть CSS-класс обратно в исходный, когда выбран новый выбор в выпадающем меню

0 голосов
/ 09 июля 2019

У меня есть выпадающее меню, которое вызывает различные наборы меню в зависимости от первого выбора.Затем на основе следующего выбора я хочу показать div с информацией в нем.Если второй выбор изменяется, я хочу скрыть отображаемый контент и отобразить новый контент для нового выбора.Проблема, с которой я сталкиваюсь, заключается в том, что когда новый выбор сделан, старый контент не скрывается, а новый контент просто добавляется к нему.

Я не понимаю jquery, поэтому я использую javascript и попытался изменитьимя класса на основе идентификатора div с использованием .classlist.remove и .add.Я также попытался создать циклы, чтобы проверить, существует ли имя класса, и изменить его на другое имя класса. 

function populate(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if (s1.value == "Auto") {
      var optionArray = ["|Please Select The Insurance Company", "nationwideauto|Nationwide", "progressiveauto|Progressive", "safeco|Safeco"];
    } else if (s1.value == "Home") {
      var optionArray = ["|Please Select The Insurance Company", "cabrillo|Cabrillo", "gulfstream|Gulfstream", "capitalpreferred|Capital Preferred"];
    } else if (s1.value == "Commercial") {
      var optionArray = ["|Please Select The Insurance Company", "bankers|Bankers", "travelers|Travelers", "progressive|Progressive"];
    }
    for (var option in optionArray) {
      var pair = optionArray[option].split("|");
      var newOption = document.createElement("option");
      newOption.value = pair[0];
      newOption.innerHTML = pair[1];
      s2.options.add(newOption);
    }
  }

  function toggle() {
    var element = document.getElementById('slct2').value;
    document.getElementById(element).classList.remove('inv');
    document.getElementById(element).classList.add('vis');
  }
  .inv {
    display: none;
  }
  
  .vis {
    display: block;
  }
<select id="slct1" name="slct1" onchange="populate(this.id, 'slct2')">
  <option value "">Please Select The Type of Claim</option>
  <option value="Auto">Auto Insurance Claim</option>
  <option value="Home">Property Insurance Claim</option>
  <option value="Commercial">Commercial Insurance Claim</option>
</select>

<select id="slct2" name="slct2" onchange="toggle(this.id)"></select>

<div id="nationwideauto" class="inv">Content 1</div>

<div id="progressiveauto" class="inv">Content 2</div>

<div id="safeco" class="inv">Content 3</div>

Я создал только первые несколько делений для проверки кода, и ожидаемый результат будет при выборе «Авто» в первом раскрывающемся меню, а затемАвто страховые компании показывают во втором раскрывающемся списке (который работает).Затем, когда вы выбираете компанию из второго выпадающего списка, она отображает контент в div (который работает).Проблема, с которой я сталкиваюсь, заключается в том, что в раскрывающемся списке 2 сделан новый выбор. Я не могу понять, как скрыть div с исходным содержимым и показать div с новым содержимым.Моя функция toggle () - это проблема, и я читал и искал три дня подряд, не имея возможности найти работающее решение.

1 Ответ

1 голос
/ 09 июля 2019

Вы можете удалить класс vis из всех элементов, а затем применить его к выбранному элементу. Нет необходимости удалять класс inv, так как класс vis переопределит его. Вместо использования переключателя мы можем явно использовать add и remove, потому что мы знаем, что только 0 или 1 элемент будет иметь класс в любой момент времени: 

function populate(s1, s2) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = "";
  if (s1.value == "Auto") {
    var optionArray = ["|Please Select The Insurance Company", "nationwideauto|Nationwide", "progressiveauto|Progressive", "safeco|Safeco"];
  } else if (s1.value == "Home") {
    var optionArray = ["|Please Select The Insurance Company", "cabrillo|Cabrillo", "gulfstream|Gulfstream", "capitalpreferred|Capital Preferred"];
  } else if (s1.value == "Commercial") {
    var optionArray = ["|Please Select The Insurance Company", "bankers|Bankers", "travelers|Travelers", "progressive|Progressive"];
  }
  for (var option in optionArray) {
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
  }
}

function toggle() {
  var element = document.getElementById('slct2').value;
  var selected = document.getElementById(element)
  const vis = document.getElementsByClassName('vis')
  vis.length && vis[0].classList.remove('vis')
  selected.classList.add('vis')

}
.inv {
  display: none;
}

.vis {
  display: block;
}
<select id="slct1" name="slct1" onchange="populate(this.id, 'slct2')">
  <option value "">Please Select The Type of Claim</option>
  <option value="Auto">Auto Insurance Claim</option>
  <option value="Home">Property Insurance Claim</option>
  <option value="Commercial">Commercial Insurance Claim</option>
</select>

<select id="slct2" name="slct2" onchange="toggle(this.id)"></select>

<div id="nationwideauto" class="inv">Content 1</div>

<div id="progressiveauto" class="inv">Content 2</div>

<div id="safeco" class="inv">Content 3</div>
...