隐藏当前日期的下拉选项

Question

是否可以在当前日期隐藏下拉选项？

请看下面的代码！

我有一个下拉选项，如下所示

选项

1 2 3 4 。 。 。 三十 31

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

假设当月是10天。

我想隐藏下拉菜单的其余部分

从11到31！

Answer 1

对于make（使用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

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

.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>

Answer 2

  

使用getDate()对象的date方法获取当前日期。

     

使用querySelectorAll迭代所有选项，并将display设置为none，使innerText大于当前日期的元素。

    var d = new Date();
    var n = d.getDate();
    var options = document.querySelectorAll("#target option");
    Array.prototype.forEach.call(options, function(item) {
      var text = parseInt(item.innerText, 10);
      if (text >= n) {
        item.style.display = 'none';
      }
    });
    document.getElementById('target').addEventListener('change', function() {
      var vis = document.querySelector('.vis'),
        target = document.getElementById(this.value);
      if (vis !== null) {
        vis.className = 'inv';
      }
      if (target !== null) {
        target.className = 'vis';
      }
    });

.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>
    <option value="content-1">1</option>
    <option value="content-2">2</option>
    <option value="content-3">3</option>
    <option value="content-4">4</option>
    <option value="content-5">5</option>
    <option value="content-6">6</option>
    <option value="content-7">7</option>
    <option value="content-8">8</option>
    <option value="content-9">9</option>
    <option value="content-10">10</option>
    <option value="content-11">11</option>
    <option value="content-12">12</option>
    <option value="content-13">13</option>
    <option value="content-14">14</option>
    <option value="content-15">15</option>
    <option value="content-16">16</option>
    <option value="content-17">17</option>
    <option value="content-18">18</option>
    <option value="content-19">19</option>
    <option value="content-20">20</option>
    <option value="content-21">21</option>
    <option value="content-22">22</option>
    <option value="content-23">23</option>
    <option value="content-24">24</option>
    <option value="content-25">25</option>
    <option value="content-26">26</option>
    <option value="content-27">27</option>
    <option value="content-28">28</option>
    <option value="content-29">29</option>
    <option value="content-30">30</option>
    <option value="content-31">31</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>

Fiddle here

您也可以使用动态创建选项来执行此操作。如果您的DOM未预先创建。

试试这个：

var d = new Date();
var n = d.getDate();
var options = '<option value="content_today" selected="selected">Todays NewsPaper</option>';
var targetElem = document.getElementById('target');
for (var i = 1; i <= n; i++) {
  options += '<option value="content-' + i + '">' + i + '</option>'
}
targetElem.innerHTML = options;
targetElem.addEventListener('change', function() {
  var vis = document.querySelector('.vis'),
    target = document.getElementById(this.value);
  if (vis !== null) {
    vis.className = 'inv';
  }
  if (target !== null) {
    target.className = 'vis';
  }
});

.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">
  </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>