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

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>