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>

现在，当我选择＆＃34; First＆＃34;在第一个选择框中，我不应该在第二个选择框中选择第一个选项。如果我在第一选择中选择第二个，那么我不能从第二个列表框中选择第一个和第二个，如果是第三个，那么我不能选择第一个，第二个和第三个。那么..我怎么能这样做？

谢谢！

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/

Answer 2

我没有jQuery就做到了：

HTML：

<select name="first" id="first" onchange="changed()">
   <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="second" id="second">
   <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>

JS：

function changed() {
    var selected = document.getElementById("first").selectedIndex;
    for( var i=0; i<=document.getElementById("second").options.length; i++ ) {
        document.getElementById( "second" ).options[i].disabled = false;
    }
    for( var i=0; i<=selected; i++ ) {
        document.getElementById( "second" ).options[i].disabled = true;
    }
}

Answer 3

更改第二个选择的id。试试这个Fiddle

第二个选择中的值应该随第一个框中的值select而改变：

$("#first").on("change",function(){
     var selected = $(this).val();
$('#second').children('option').each(function() {
        if ( $(this).val() <= selected ) {
            $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false)
        }
    });
   $('#second').val(parseInt(selected)+1) //To change value in second select
})

Answer 4

$('#first').change(function() {
    var v = $(this).find("option:selected").index();

    $('select[id!="first"] option').each(function() {
        if ( $(this).index() <= v ) {
            $(this).attr('disabled',true);
        } else {
            $(this).attr('disabled',false)
        }
    });           

});

试试此代码，您无需添加任何新的ID或names。

使用jquery动态选择选择

4 个答案: