javascript - 隐藏基于当前日期的下拉选项

Question

是否可以隐藏基于当前日期的下拉选项？

请看下面的代码!

我有一个下拉选项如下

选项

12个3个4个...3031

默认情况下 - 选择选项 1。

假设当前月份的天数为 10。

我想隐藏下拉列表的其余部分

从 11 到 31 !

Answer 1

为此(使用 Jquery)，创建您的 option动态选择。

$(document).ready(function() {
   monthDay = 10;
   for(t=1;t<=monthDay;t++){
    opt = '<option value="content-'+t+'">'+t+'</option>';
    $("#target").append(opt)
   }

 })

.selectdate{
   background: #ea6153;
   padding:10px 5px;
   color: #fff;
   border-radius: 5px 5px 0px 0px; 
   }
  .selectdate select{
   background: #ea6153;
   padding:5px;
   color: #fff;
 border: 1px solid #fff;
   }

	.inv {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="selectdate">
   Please Select a Date 
<select id="target">   
<option value="content_today" selected="selected" >Todays NewsPaper</option>
</select>
      </div>
 
        <div id="content_today" class="vis">  
		<h3>Todays Newspaperz</h3>			
			
		</div>
		<!-- today's end -->
        <div id="content-1" class="inv">
		<h3>Date 1</h3
			  		</div>
        <div id="content-2" class="inv">		<h3>Date 2</h3>		
		</div>
        <div id="content-3" class="inv">
		
<h3>Date 3</h3>
		</div>
            <div id="content-4" class="inv">
		
<h3>Date 4</h3>
		</div>

更新 - 仅使用 Javascript

添加 <script>在您的 html 代码之后标记。

.selectdate{
   background: #ea6153;
   padding:10px 5px;
   color: #fff;
   border-radius: 5px 5px 0px 0px; 
}

.selectdate select{
   background: #ea6153;
   padding:5px;
   color: #fff;
   border: 1px solid #fff;
}

.inv {
    display: none;
}

<div class="selectdate">
   Please Select a Date 
   <select id="target">   
      <option value="content_today" selected="selected" >Todays NewsPaper</option>
   </select>
</div>
 
<div id="content_today" class="vis">  
   <h3>Todays Newspaperz</h3>			
</div>

<!-- today's end -->
<div id="content-1" class="inv">
   <h3>Date 1</h3>
</div>

<div id="content-2" class="inv">		
   <h3>Date 2</h3>		
</div>
          
<div id="content-3" class="inv">	
   <h3>Date 3</h3>
</div>
          
<div id="content-4" class="inv">	
   <h3>Date 4</h3>
</div>
          
<script>
   monthDay = 10;
   for(t=1;t<=monthDay;t++){
     var target =  document.getElementById("target");
     var opt = document.createElement("option");
     opt.text = t;
     opt.value = "content-" + t;
     target.add(opt);
   }
</script>