动态选择选择使用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/

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

值应与值改为选择在第一箱：

$("#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。