Question

我有一个下拉菜单，用于选择首页内容的过滤器。我想要这样，以便如果选择的值是“ top”，则带有时间范围的第二个下拉菜单会出现在它旁边。我都有它们的HTML和CSS，但是无法使JQuery正常工作。

我尝试使用JQuery进行的操作如下：

if (.order value == "top") {
    change .order-time to .order-time-display;
}

.order-container {
  margin: 0 auto;
  width: 75%;
  margin-bottom: -10px;
}

.order-text {
  display: inline-block;
}

.order-menu {
  margin-left: 10px;
  display: inline-block;
}

.order-container select {
  padding: 14px 16px;
  font-size: 14px;
}

.order-container p {
  font-weight: bold;
}

.order-container option {
  font-size: 14px;
}

.order-time {
  display: none;
}

.order-time-display {
  display: inline-block;
}

<div class="order-container">
  <div class="order-text">
    <p>Order:</p>
  </div>
  <div class="order-menu">
    <select name="order" class="order">
      <option value="hot" selected> Hot </option>
      <option value="recent"> Recent </option>
      <option value="top"> Top </option>
    </select>
  </div>
  <select name="order-time" class="order-time">
    <option value="24h" selected> 24h </option>
    <option value="week"> Week </option>
    <option value="month"> Mont </option>
    <option value="year"> Year </option>
    <option value="all"> All </option>
  </select>
</div>

Answer 1

在change元素上使用.order事件。

$(function() {
  $(".order").on("change", function() {
    if (this.value === "top") {
      $(".order-time").addClass("order-time-display")
    } else {
      $(".order-time").removeClass("order-time-display")
    }
  })
})

.order-container {
  margin: 0 auto;
  width: 75%;
  margin-bottom: -10px;
}

.order-text {
  display: inline-block;
}

.order-menu {
  margin-left: 10px;
  display: inline-block;
}

.order-container select {
  padding: 14px 16px;
  font-size: 14px;
}

.order-container p {
  font-weight: bold;
}

.order-container option {
  font-size: 14px;
}

.order-time {
  display: none;
}

.order-time-display {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order-container">
  <div class="order-text">
    <p>Order:</p>
  </div>
  <div class="order-menu">
    <select name="order" class="order">
      <option value="hot" selected> Hot </option>
      <option value="recent"> Recent </option>
      <option value="top"> Top </option>
    </select>
  </div>
  <select name="order-time" class="order-time">
    <option value="24h" selected> 24h </option>
    <option value="week"> Week </option>
    <option value="month"> Mont </option>
    <option value="year"> Year </option>
    <option value="all"> All </option>
  </select>
</div>

Answer 2

我假设您要基于第一个选择框的值显示第二个选择框order-time，该值应为top才能显示它。


$(document).on('change', 'select[name=order]', function () {

  let val = $(this).val();
  let orderTimeSelectBox = $('select[name=order-time]')

  if (val === 'top') {

    orderTimeSelectBox.show()
  }
  else {
    orderTimeSelectBox.hide()
  }
})

根据下拉选择值显示/隐藏元素

2 个答案: