在多个选择值上隐藏/显示DIV [英] Hide/Show DIV's on multiple select values

问题描述

你好！这是我的代码：

HTML：

 <  选择    id   =  term    name   =  form_select >  
 <  选项   < span class =code-attribute> value   =  0 > 选择字词<   / option  >  
 <  选项    value   =  1 > 月<   / option  >  
 <  选项    value   =  2 > 周<   / option  >  
 <  选项    value   =  3 & gt; 日<   / option  > ;  
 <   / select  >  
 <  选择    id   =  season    name   =  form_select >  
 <  选项    value   =  0 > 选择季节< span class =code-keyword><   / option  >  
 <  选项    value   =  1 > 低<   / option  >  
 <  选项    value   =  2  > 高<   / option  >  
 <  选项    value   =  3 > 峰值< ;   / option  >  
 <   / select  >  
 
 tr_ad_lowmonth 
 tr_ad_lowweek 
 tr_ad_lowday 
 tr_ad_hightmonth 
 tr_ad_hightweek 
 tr_ad_hightday 
 tr_ad_peakmonth 
 tr_ad_peakweek 
 tr_ad_peakday 

JS：

 $（'  ＃term，＃season'）。on（' 更改'，函数（）{
 $（' < span class =code-string> div [id ^ =ad _]：gt（3）'）。css（  display，  none）; 
 
  var  term = $ .trim（$（' ＃term：selected'）。text（）。toLowerCase（）），
 season = $ .trim（$（' ＃season：selected'）。text（）。toLowerCase（））; 
  if （$（' ＃term：选择'）。val（）>  0 && $（' < span class =code-string>＃season：selected'）。val（）>  0 ）{
  var  $ sel = ' ＃ad _' + season + term ; 
 $（$ sel）.css（  display，  block）; 
 
} 
 
}）; 

CSS：

＃ ad_lowmonth ，
＃ ad_lowweek ，
＃ ad_lowday ，
＃ ad_hightmonth ，
＃ ad_hightweek ，
＃ ad_hightday ，
＃ ad_peakmonth ，
＃ ad_peakweek ，
＃ ad_peakday  {
  display  ：  none;  
} 

它在 Feedle ，但不适用于我的网站。我不知道为什么！有人能帮助我吗？谢谢！

解决方案

（' ＃term，＃ season'）。on（' change'， function （）{

（' div [id ^ =ad _]：gt（3）'）。css（ display， none）;

var term =

.trim（

Hi there! Here is my code:
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>

tr_ad_lowmonth
tr_ad_lowweek
tr_ad_lowday
tr_ad_hightmonth
tr_ad_hightweek
tr_ad_hightday
tr_ad_peakmonth
tr_ad_peakweek
tr_ad_peakday

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

   }

});

CSS:

#ad_lowmonth,
#ad_lowweek,
#ad_lowday,
#ad_hightmonth,
#ad_hightweek,
#ad_hightday,
#ad_peakmonth,
#ad_peakweek,
#ad_peakday {
display:none;
}

It works perfect in Feedle , but don't work on my website . I don't know why! Can somebody help me? Thank you!

解决方案

('#term, #season').on('change', function() {

('div[id^="ad_"]:gt(3)').css("display","none"); var term =

.trim(

这篇关于在多个选择值上隐藏/显示DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！