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

Question

I have a dropdown menu for selecting a filter for the frontpage content. I want it so that if the selected value is "top" a second dropdown appears next to it with the timeframes. I have the HTML and CSS for both of them, but can't get the JQuery working.

What I tried to do with the JQuery is like the following:

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

Use the change event on the .order element.

 $(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

I'm assuming you want to display the second select box order-time based on the first's value where the value should be top to display it ..

$(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()
  }
})