JQuery - 根据其他下拉值设置下拉值答案

【问题标题】：JQuery - Set dropdown values based on other dropdown valueJQuery - 根据其他下拉值设置下拉值
【发布时间】：2018-10-30 13:17:41
【问题描述】：

我有如下三个下拉值

如您所见，如果一个下拉列表的值不等于“全部”，我需要将其他下拉列表值设置为“全部”。现在发生的事情是，如果我更改第一个下拉列表的值，其他值设置正确，但是当我更改第二个下拉列表时，第一个下拉列表未设置为“全部”。它以相反的顺序工作。设置完所有值后，我需要将变量作为参数发送给函数调用。

  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() 在页面准备就绪时运行一次。
实际上，整个代码运行在一个函数中，该函数调用每个下拉更改。
啊，我看到你在我发表评论后更改了帖子。

标签： jquery drop-down-menu

【解决方案1】：

如果我理解正确，你可以这样做；给所有选择输入一个类名，如“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>

【讨论】：