javascript - 如何根据 html 中的另一个选择选项操作选择选项？

Question

我有两个选择标签(都是一样的):

<select class="form-control" name='end'>
    <option selected disabled hidden value="">end</option>

    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

在这里，如果我从第一个下拉列表中选择一个选项，那么在第二个下拉列表中，不应显示所选选项之前的所有选项。例如，如果我在第一个下拉列表中选择 5，那么第二个下拉列表应该只显示 6-11。谁能帮我解决这个问题？

JSFIDDLE

Answer 1

你需要添加一个onchange事件监听器，并使用第一个select的值循环遍历第二个select并隐藏选项。

使用 jQuery:

var max = 0;
var options = $("select[name='end']").find('option');

$("select[name='start']").on('change', function() {

    options.each(function(){
        $(this).show();
    });

    max = parseInt( $(this).val() );

    for (i=0; i < max; i++) {
        $(options[i]).hide();
    }

});