显示隐藏 <li> jQuery的下拉菜单元素

Question

I am working on a search results form where I need to show / hide list values based on the user selection of a radio button. If the user checks the 'Sales' radio button, only the li classes named 'Sales' will display in the dropdown menu. If the user checks the 'Rentals' radio button, only the li classes marked 'Rentals' will show in the dropdown menu.

Here is my code:

Radio Buttons:

<input type="radio" onchange="allItemsDisplay(this.value);" name="search_type" value="Sales" <?php if($_SESSION['search_type'] == "Sales") { echo 'checked';} else { echo " ";}?>/>
<input type="radio" onchange="allItemsDisplay(this.value);" name="search_type" value="Rentals" <?php if($_SESSION['search_type'] == "Rentals") { echo 'checked';} else { echo " ";}?> />

Dropdown Menus:

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul id="allItems" class="dropdown-menu">
     <li><input type="hidden" name="price" value="<?php if($_SESSION['price'] == "") { echo "";} else { echo $_SESSION['price'];}?>"></li>
     <li class="Sales"><a data-value="">Min Price</a></li>
     <li class="Sales"><a data-value="10000">10,000</a></li>
     <li class="Sales"><a data-value="20000">20,000</a></li>
     <li class="Sales"><a data-value="30000">30,000</a></li>
     <li class="Rentals" style="display:none"><a data-value="">Min Price</a></li>
     <li class="Rentals" style="display:none"><a data-value="100">100</a></li>
     <li class="Rentals" style="display:none"><a data-value="200">200</a></li>
     <li class="Rentals" style="display:none"><a data-value="300">300</a></li>
</ul>

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul id="allItems1" class="dropdown-menu">
     <li><input type="hidden" name="maxprice" value="<?php if($_SESSION['maxprice'] == "") { echo "";} else { echo $_SESSION['maxprice'];}?>"></li>
     <li class="Sales"><a data-value="">Max Price</a></li>
     <li class="Sales"><a data-value="10000">10,000</a></li>
     <li class="Sales"><a data-value="20000">20,000</a></li>
     <li class="Sales"><a data-value="30000">30,000</a></li>
     <li class="Rentals" style="display:none"><a data-value="">Max Price</a></li>
     <li class="Rentals" style="display:none"><a data-value="100">100</a></li>
     <li class="Rentals" style="display:none"><a data-value="200">200</a></li>
     <li class="Rentals" style="display:none"><a data-value="300">300</a></li>
</ul>

JS to trigger the Show/Hide:

function allItemsDisplay(thsVal){
$('#allItems').children().css('display','none');
$('#allItems').children('.' + thsVal).css('display','');
$('#allItems1').children().css('display','none');
$('#allItems1').children('.' + thsVal).css('display','');
}

The default behavior on page load is for the 'Sales' values to show in the dropdown menus, but I need the 'Rentals' values to show on page load if there is stored SESSION data of the 'Rentals' radio button being checked by the user previously?

Answer 1

This should help you:

var storageKey = "listRadio";

function allItemsDisplay(value) {
  $("#allItems li, #allItems1 li").hide();
  $("#allItems li." + value).show();
  $("#allItems1 li." + value).show();

  localStorage.setItem(storageKey, value);
}

$(document).ready(function () {
  if (localStorage.getItem(storageKey) === null) {
    allItemsDisplay("Sales");
  } else {
    var value = localStorage.getItem(storageKey);

    allItemsDisplay(value);

    $(":radio[name=search_type][value=" + value + "]").prop("checked", true);
  }
});

This will also store the previous radio value for you using only javascript, so you may want to get rid of the php code that store the value of the radio on a session variable.

Take a look at the fiddle: https://jsfiddle.net/esm6u2gy/1/

Good luck!

Answer 2

I would consider not using javascript and just use CSS.

I've used an attribute selector, but there is no reason you couldn't use an extra class on the ul

 ul[data-searchType="Rentals"] > .Rentals {display:list-item;} ul[data-searchType="Rentals"] > .Sales {display:none;} .Rentals{display:none;} 

 <h3>Simulating $_SESSION['search_type'] == "Rentals"</h3> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <!-- <ul id="allItems" class="dropdown-menu" data-searchType="<?php echo $_SESSION['search_type'] ?>">--> <ul id="allItems" class="dropdown-menu" data-searchType="Rentals"> <!--<li><input type="hidden" name="price" value="<?php if($_SESSION['price'] == "") { echo "";} else { echo $_SESSION['price'];}?>"></li>--> <li><a data-value="">Min Price</a></li> <li class="Sales"><a data-value="10000">10,000</a></li> <li class="Sales"><a data-value="20000">20,000</a></li> <li class="Sales"><a data-value="30000">30,000</a></li> <li class="Rentals"><a data-value="100">100</a></li> <li class="Rentals"><a data-value="200">200</a></li> <li class="Rentals"><a data-value="300">300</a></li> </ul> <h3>Simulating $_SESSION['search_type'] == "Sales"</h3> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <!-- <ul id="allItems1" class="dropdown-menu" data-searchType="<?php echo $_SESSION['search_type'] ?>">--> <ul id="allItems1" class="dropdown-menu" data-searchType="Sales"> <!--<li><input type="hidden" name="maxprice" value="<?php if($_SESSION['maxprice'] == "") { echo "";} else { echo $_SESSION['maxprice'];}?>"></li>--> <li><a data-value="">Max Price</a></li> <li class="Sales"><a data-value="10000">10,000</a></li> <li class="Sales"><a data-value="20000">20,000</a></li> <li class="Sales"><a data-value="30000">30,000</a></li> <li class="Rentals"><a data-value="100">100</a></li> <li class="Rentals"><a data-value="200">200</a></li> <li class="Rentals"><a data-value="300">300</a></li> </ul>