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小提琴：你能够获得/生成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;    
  }

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

1 个答案: