使用Javascript：禁用選擇2中的選擇選項1基於選擇1

Question

我的程序有兩個具有相同選項的選擇字段。

<select id="startDate"> 
    <option value="2014-07-11">July. 11th, 2014</option> 
    <option value="2014-07-25">July. 25th, 2014</option> 
    <option value="2014-08-08">August. 8th, 2014</option> 
    <option value="2014-08-22">August. 22th, 2014</option> 
    <option value="2014-09-05">September. 5th, 2014</option> 
</select> 


<select id="endDate"> 
    <option value="2014-07-11">July. 11th, 2014</option> 
    <option value="2014-07-25">July. 25th, 2014</option> 
    <option value="2014-08-08">August. 8th, 2014</option> 
    <option value="2014-08-22">August. 22th, 2014</option> 
    <option value="2014-09-05">September. 5th, 2014</option> 
</select> 

我想完成的是根據選擇更改startDate，在endDate中禁用所有選項之前的日期。例如，如果八月。在startDate中選擇2014年8月，禁用endDate中的前2個選項。所以7月11日和7月15日應該在endDate停用。

我該如何去實現這一目標？

謝謝。

Answer 1

首先，您需要綁定onchange事件。然後循環第二個選擇選項，並根據第一個選擇中的選定索引禁用/啓用它們。請注意，你甚至不必比較選項值，因爲這兩個selectboxes具有相同的選項設置：

document.querySelector('#startDate').addEventListener('change', function() { 
 
    var endDate = document.querySelector('#endDate'); 
 
    for (var i = 0; i < endDate.options.length; i++) { 
 
     endDate.options[i].disabled = i < this.selectedIndex; 
 
    } 
 
});

<select id="startDate"> 
 
    <option value="2014-07-11">July. 11th, 2014</option> 
 
    <option value="2014-07-25">July. 25th, 2014</option> 
 
    <option value="2014-08-08">August. 8th, 2014</option> 
 
    <option value="2014-08-22">August. 22th, 2014</option> 
 
    <option value="2014-09-05">September. 5th, 2014</option> 
 
</select> 
 

 
<select id="endDate"> 
 
    <option value="2014-07-11">July. 11th, 2014</option> 
 
    <option value="2014-07-25">July. 25th, 2014</option> 
 
    <option value="2014-08-08">August. 8th, 2014</option> 
 
    <option value="2014-08-22">August. 22th, 2014</option> 
 
    <option value="2014-09-05">September. 5th, 2014</option> 
 
</select>

Answer 2

var sl1 = document.getElementById('startDate'); 
var sl2 = document.getElementById('endDate'); 

sl1.addEventListener('change', function() { 
    var opts = sl2.childNodes; 
    for(var i = 0; i < opts.length; i++) { 
     if(opts[i].value < sl1.value) 
      opts[i].disabled = true; 
    } 
}); 

jsfiddle DEMO