javascript - 通过许多不同的选择显示/隐藏 DIV

Question

我尝试根据两个不同的选择值隐藏和显示不同的 DIV。我想按季节和租金期限在房地产目录中进行搜索。这是选择:

<select id="test" name="form_select" onchange="showDiv(this)">
       <option value ="hui">Choose term</option>
       <option value="0">Month</option>
       <option value ="1">Week</option>
       <option value ="2">Day</option>
    </select>
   <select id="test" name="form_select" onchange="showDiv1(this)">
       <option value ="hui">Choose season</option>
       <option value="0">Low</option>
       <option value ="1">Hight</option>
       <option value ="2">Peak</option>
    </select>

我使用的脚本:

 function showDiv(elem){if(elem.value == 0)
  document.getElementById('tr_ad_lowmonth').style.display = "block";
  else
  document.getElementById('tr_ad_lowmonth').style.display = "none";if(elem.value == 1)
  document.getElementById('tr_ad_lowweek').style.display = "block";
  else
  document.getElementById('tr_ad_lowweek').style.display = "none";if(elem.value == 2)
  document.getElementById('tr_ad_lowday').style.display = "block";
  else
  document.getElementById('tr_ad_lowday').style.display = "none";if(elem.value == 0)
  document.getElementById('tr_ad_hightmonth').style.display = "block";
  else
  document.getElementById('tr_ad_hightmonth').style.display = "none";if(elem.value == 1)
  document.getElementById('tr_ad_hightweek').style.display = "block";
  else
  document.getElementById('tr_ad_hightweek').style.display = "none";if(elem.value == 2)
  document.getElementById('tr_ad_hightday').style.display = "block";
  else
  document.getElementById('tr_ad_hightday').style.display = "none";if(elem.value == 0)
  document.getElementById('tr_ad_peakmonth').style.display = "block";
  else
  document.getElementById('tr_ad_peakmonth').style.display = "none";if(elem.value == 1)
  document.getElementById('tr_ad_peakweek').style.display = "block";
  else
  document.getElementById('tr_ad_peakweek').style.display = "none";if(elem.value == 2)
  document.getElementById('tr_ad_peakday').style.display = "block";
  else
  document.getElementById('tr_ad_peakday').style.display = "none";if(elem.value == 0)
  document.getElementById('searchfields').style.display = "block";if(elem.value == 1)
  document.getElementById('searchfields').style.display = "block";if(elem.value == 2)
  document.getElementById('searchfields').style.display = "block";
    }

这是我的 div:

<div id="searchfields" style="display:none;">
        <?php 
        foreach($this->searchfields as $fsearch) {
            $title = $this->field->showFieldTitle($this->catid,$fsearch);
            echo "<div id='tr_".$fsearch->name."'>".htmlspecialchars($title)."";
            $this->field->showFieldSearch($fsearch,$this->catid,null);
            echo "</div>";
        }?> 
       </div>

当我选择淡季和淡周时，我想要做什么，它只显示ID为“tr_ad_lowweek”的DIV。

Answer 1

检查my fiddle :您可以在其中获取/生成 DIV 选择器。然后你可以使用它作为选择器并渲染相应的选择器内容。

//JS : Select.js

$('#term, #season').on('change', function() {
 $('div[id^="ad_"]:gt(3)').css("display","none");

      var term   = $.trim( $('#term :selected').text().toLowerCase() ),
      season = $.trim( $('#season :selected').text().toLowerCase() );
 if($('#term :selected').val() > 0 && $('#season :selected').val() > 0)   {
          var $sel = '#ad_' + season + term;
          $($sel).css("display","block");

   }

});

//HTML

<select id="term" name="form_select">
  <option value="0">Choose term</option>
  <option value="1">Month</option>
  <option value="2">Week</option>
  <option value="3">Day</option>
</select>
<select id="season" name="form_select">
  <option value="0">Choose season</option>
  <option value="1">Low</option>
  <option value="2">Hight</option>
  <option value="3">Peak</option>
</select>

<div id="tr_ad_lowmonth">tr_ad_lowmonth</div>
<div id="tr_ad_lowweek">tr_ad_lowweek</div>
<div id="tr_ad_lowday">tr_ad_lowday</div>
<div id="tr_ad_hightmonth">tr_ad_hightmonth</div>
<div id="tr_ad_hightweek">tr_ad_hightweek</div>
<div id="tr_ad_hightday">tr_ad_hightday</div>
<div id="tr_ad_peakmonth">tr_ad_peakmonth</div>
<div id="tr_ad_peakweek">tr_ad_peakweek</div>
<div id="tr_ad_peakday">tr_ad_peakday</div>

//CSS

 div{
   display:none;    
  }