时间戳

首页 > 解决方案 > 根据下拉选择值显示/隐藏元素

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

问题描述

我有一个用于为首页内容选择过滤器的下拉菜单。我想要它，以便如果所选值是“顶部”，则在其旁边会出现第二个下拉列表以及时间范围。我有他们两个的 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>

标签： jqueryhtmlcss

解决方案

在元素上使用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>

推荐阅读