JQuery - установка значений раскрывающегося списка на основе другого значения раскрывающегося списка

У меня есть три раскрывающихся значения, как показано ниже

Как видите, если значение одного раскрывающегося списка не равно «Все», мне нужно установить другие значения раскрывающегося списка на «Все». Что происходит сейчас, если я изменяю значение первого раскрывающегося списка, другие значения устанавливаются правильно, но когда я изменяю второе раскрывающееся меню, первое раскрывающееся меню не устанавливается на «Все». Работает в обратном порядке. После установки всех значений мне нужно отправить переменные в качестве параметров для вызова функции.

  var selActuals = $('#actuals_dropdown').val();
  var selBudget = $('#budget_dropdown').val();
  var selYTD = $('#ytd_dropdown').val();

  if (selActuals != "All") {
    $('#budget_dropdown').val("All");
    $('#ytd_dropdown').val("All");
  } else if (selBudget != "All") {
    $('#actuals_dropdown').val("All");
    $('#ytd_dropdown').val("All");
  } else if (selYTD != "All") {
    $('#actuals_dropdown').val("All");
    $('#budget_dropdown').val("All");
  }
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "region-block">
  <div class = "lbl">Yearly Actuals:</div>
  <div class = "ftr">
    <select id = "actuals_dropdown" name = "actuals_dropdown" style = "width: 100%;">
      <option value = "All">Sort By</option>
      <option value = "DESC">DESC</option>
      <option value = "ASC">ASC</option>
    </select>
  </div>
</div>

<div class = "region-block">
  <div class = "lbl">Yearly Budget:</div>
  <div class = "ftr">
    <select id = "budget_dropdown" name = "budget_dropdown" style = "width: 100%;">
      <option value = "All">Sort By</option>
      <option value = "DESC">DESC</option>
      <option value = "ASC">ASC</option>
    </select>
  </div>
</div>

<div class = "region-block">
  <div class = "lbl">YTD:</div>
  <div class = "ftr">
    <select id = "ytd_dropdown" name = "ytd_dropdown" style = "width: 100%;">
      <option value = "All">Sort By</option>
      <option value = "DESC">DESC</option>
      <option value = "ASC">ASC</option>
    </select>
  </div>
</div>

Ваш javascript работает только при первой загрузке страницы. Вы понимаете, что после этого не выполняется javascript? $(document).ready() запускается один раз, когда страница готова.

Marc 30.10.2018 14:29

Фактически, весь код выполняется в функции, которая вызывает каждое изменение раскрывающегося списка.

vamsi 30.10.2018 14:33

А, я вижу, вы изменили пост после моего комментария.

Marc 30.10.2018 14:44
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
3
47
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

если я правильно понимаю, можно и так; Дайте всем входным данным select имя класса, например, 'drp-filter'

$(function() {
  $('.drp-filter').change(function() {
    var value = $(this).val();
    if (value != 'All') {
      $('.drp-filter').val('All')
      $(this).val(value);
    }
  });
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "region-block">
  <div class = "lbl">Yearly Actuals:</div>
  <div class = "ftr">
    <select id = "actuals_dropdown" name = "actuals_dropdown" style = "width: 100%;" class='drp-filter'>
      <option value = "All">Sort By</option>
      <option value = "DESC">DESC</option>
      <option value = "ASC">ASC</option>
    </select>
  </div>
</div>

<div class = "region-block">
  <div class = "lbl">Yearly Budget:</div>
  <div class = "ftr">
    <select id = "budget_dropdown" name = "budget_dropdown" style = "width: 100%;" class='drp-filter'>
      <option value = "All">Sort By</option>
      <option value = "DESC">DESC</option>
      <option value = "ASC">ASC</option>
    </select>
  </div>
</div>

<div class = "region-block">
  <div class = "lbl">YTD:</div>
  <div class = "ftr">
    <select id = "ytd_dropdown" name = "ytd_dropdown" style = "width: 100%;" class='drp-filter'>
      <option value = "All">Sort By</option>
      <option value = "DESC">DESC</option>
      <option value = "ASC">ASC</option>
    </select>
  </div>
</div>

Другие вопросы по теме