Question

我正在处理搜索结果表单，我需要根据用户选择的单选按钮显示/隐藏列表值。如果用户检查＆＃39;销售＆＃39;单选按钮，只有名为＆＃39; Sales＆＃39;将显示在下拉菜单中。如果用户检查“租赁”＆＃39;单选按钮，只有标有＆＃39; Rentals＆＃39;将显示在下拉菜单中。

这是我的代码：

收音机按钮：

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

页面加载的默认行为是针对＆＃39;销售＆＃39;要在下拉菜单中显示的值，但我需要＆＃39; Rentals＆＃39;如果存储了＆＃39; Rentals＆＃39;的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>

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

2 个答案: