動態選擇選擇使用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。