Javascript: 在 Select 2 中禁用 select 选项基于 Select 1

Question

我的程序有两个具有相同选项的 select 字段。

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

我想要完成的是根据 selection 更改开始日期，在结束日期中禁用该日期之前的所有选项。例如，如果八月。 8 日，2014 年在 startDate 中被 selected，禁用 endDate 中的前 2 个选项。所以 7 月 11 日和 7 月 15 日应该在 endDate 中被禁用。

我怎样才能实现这个目标？

谢谢。

Answer 1

首先需要绑定onchange事件。然后根据第一个 select 中的 selected 索引循环第二个 select 选项和 disabled/enable 它们。请注意，您甚至不必比较选项值，因为两个 select 框具有相同的选项集：

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

Javascript: 在 Select 2 中禁用 select 选项基于 Select 1

Javascript: Disable select options in Select 2 based on Select 1

javascript

drop-down-menu