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

Question

我正在处理一个搜索结果表单，其中需要根据用户对单选按钮的选择来显示/隐藏列表值。 如果用户选中“销售”单选按钮，则只有名为“销售”的li类将显示在下拉菜单中。 如果用户选中“出租”单选按钮，则只有标记为“出租”的li类将显示在下拉菜单中。

这是我的代码：

单选按钮：

<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 " ";}?> />

下拉菜单：

<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触发显示/隐藏：

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

页面加载的默认行为是“销售”值显示在下拉菜单中，但是如果存储了“租金”单选按钮的SESSION数据，则我需要“租金”值显示在页面加载中用户以前？

Answer 1

这应该可以帮助您：

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);
  }
});

这也将仅使用javascript为您存储以前的单选值，因此您可能希望摆脱将单选值存储在会话变量上的php代码。

看看小提琴： https : //jsfiddle.net/esm6u2gy/1/

祝好运！

Answer 2

我会考虑不使用JavaScript，而只使用CSS。

我使用了属性选择器，但是没有理由不能在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>