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个选项。所以应该在endDate中禁用7月11日和7月15日。

我怎么能实现这个目标？

感谢。

Answer 1

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

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：根据选择1禁用选择2中的选择选项

2 个答案: