javascript - 使用 jquery 进行动态选择

Question

我有两个选择框，如下，

<select name="first" id="first">
   <option value="0">First</option>
   <option value="1">Second</option>
   <option value="2">Third</option>
   <option value="3">Fourth</option>
   <option value="4">Five</option>
   <option value="5">Six</option>
   <option value="6">Seven</option>
</select>

第二个选择框:

<select name="first" id="first">
   <option value="0">First</option>
   <option value="1">Second</option>
   <option value="2">Third</option>
   <option value="3">Fourth</option>
   <option value="4">Five</option>
   <option value="5">Six</option>
   <option value="6">Seven</option>
</select>

现在，当我在第一个选择框中选择“第一个”时，我应该无法在第二个选择框中选择第一个选择。如果我在第一个选择中选择第二个，那么我不应该能够从第二个列表框中选择第一个和第二个，如果第三个，那么我不应该能够选择第一个、第二个和第三个。等等..我该怎么做？

谢谢!

Answer 1

所以首先给第二个选择一个不同的名称和ID(例如第二个)并尝试这个JS:

$('#first').change(function() {
    var value = $(this).val();

    $('#second').children('option').each(function() {
        if ( $(this).val() <= value ) {
            $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false)
        }
    });

    $('#second').val(parseInt(value)+1);
});

http://jsfiddle.net/charlesrv/av97qfqc/2/