我有一個要求當選擇下拉值時，它必須過濾或刪除其索引應始終大於第一個下拉菜單的選定索引的其他下拉菜單的值。javascript根據其他下拉菜單更改下拉值

例：第一個下拉值：

01:00 
01:30 
02:00 // suppose i select 02:00 here 
02:30 
03:00 
03:30 
04:00 
04:30 
05:00 
05:30

二Dropdonw值（上在上述下拉選擇02:00應該如下）

（IM使用C＃與Asp.net在這裏。）

任何JavaScript實現VE以上將不勝感激

，並使用腳本如下的薩爾曼建議

<body onload="select()"> 
<script language="javascript"> 
function select(){ 
var select1 = document.getElementById("ddlFrom"); 
var select2 = document.getElementById("ddlTo"); 
select1.onchange = function filterDDL() {  // empty select2 
while (select2.firstChild) { 
select2.removeChild(select2.firstChild); 
    }  
if (select1.selectedIndex == 0) 
    { 
    return; 
    } 
    for (var i = select1.selectedIndex; i < select1.options.length; i++) 
    { 
    var o = document.createElement("option"); 
    o.value = select1.options[i].value; 
    o.text = select1.options[i].text; 
    select2.appendChild(o); 

     } 
    } 
}</script>

，但沒有工作...請

來源

2011-05-13 Jam

你使用的是JavaScript框架，如jQuery或只是普通的JavaScript？如果你使用框架，它更容易。 – 2011-05-13 10:29:48

編輯（使用jQuery就在這感謝幫助提前想要的結果）：

<select id="one"> 
    <option value="01:00">01:00</option> 
    <option value="01:30">01:30</option> 
    <option value="02:00">02:00</option> 
    <option value="02:30">02:30</option> 
    <option value="03:00">03:00</option> 
    <option value="03:30">03:30</option> 
</select> 

<select id="two"></select> 

<script type="text/javascript"> 
    $(function() { 
     $("#one").change(function (e) { 
      $("#two").empty(); 

      var options = 
      $("#one option").filter(function(e){ 
       return $(this).attr("value") > $("#one option:selected").val(); 
      }).clone(); 

      $("#two").append(options); 
     }); 
    }); 
</script>

來源

2011-05-13 10:30:25 Craig

可否請您進一步詳細說明，我將如何能夠綁定這兩個DDL之間的關係'，謝謝 – Jam 2011-05-13 10:34:37

Vanilla JavaScript解決方案and demo。

HTML

<select name="select1" id="select1"> 
    <option value="">-- select an option --</option> 
    <option value="01:00">01:00</option> 
    <option value="01:30">01:30</option> 
    <option value="02:00">02:00</option> 
    <option value="02:30">02:30</option> 
    <option value="03:00">03:00</option> 
    <option value="03:30">03:30</option> 
    <option value="04:00">04:00</option> 
    <option value="04:30">04:30</option> 
    <option value="05:00">05:00</option> 
    <option value="05:30">05:30</option> 
</select> 
<select name="select2" id="select2"> 
</select>

的JavaScript

// this function must be wrapped inside onload event 
var select1 = document.getElementById("select1"); 
var select2 = document.getElementById("select2"); 
select1.onchange = function() { 
    // empty select2 
    while (select2.firstChild) { 
     select2.removeChild(select2.firstChild); 
    } 
    if (select1.selectedIndex == 0) { 
     return; 
    } 
    for (var i = select1.selectedIndex; i < select1.options.length; i++) { 
     var o = document.createElement("option"); 
     o.value = select1.options[i].value; 
     o.text = select1.options[i].text; 
     select2.appendChild(o); 
    } 
}

來源

2011-05-13 10:41:45

所以，我想我不應該再給選擇select2下拉選項，我已經包裝在一個函數上面的腳本，並放在body onload ...仍然沒有使用 – Jam 2011-05-13 13:04:37

@Jam：在jsFiddle上的演示是否奏效？（鏈接在我的答案的最頂部） – 2011-05-13 14:57:48

@salmanA感謝您的小提琴。真的很酷:) – mtk 2012-06-24 16:35:08

有多種方式來實現這一點，每一個可能很適合不同的使用率。按值

@Craig

篩選已經暗示它。給出下拉選項值。當事情在第一個選中後，值低於或等於其值從第二個下拉刪除：http://jsfiddle.net/q8mLH/

使用可對

數組創建你自己感興趣的對數組，那麼，當選擇1改變時，基於什麼是你允許對數組中定義更新選擇2可用的選項：http://jsfiddle.net/AU6hq/

AJAX +數據庫對

我不打算在這裏指定一個例子，對不起，但總的想法是這樣的：你需要在你的數據庫中有一些表，比如說「國家」和「城市」，每個國家都有一個ID，每個城市有自己的唯一ID加上它所在國家的ID。您可能只想顯示所選國家/地區的城市。

將change（）事件綁定到縣選擇並通過ajax調用加載第二個select的內容，查詢數據庫以查找位於選定國家/地區的城市。

可能還有更多，但我不覺得今天想太多;）。無論如何，我希望這有助於。

[編輯]

我的例子使用jQuery，我希望這不是一個問題。

來源

2011-05-13 10:56:03 mingos

javascript根據其他下拉菜單更改下拉值

回答

HTML

的JavaScript

相關問題