限制下拉列表的範圍

我有兩個下拉列表中HTML尋找（簡化的）是這樣的：限制下拉列表的範圍

<select name="from" id="abs-from-1"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
</select> 

<select name="to" id="abs-to-1"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
</select>

我想限制這些輸入，這樣，當用戶在選擇了「三」第一個下拉列表中，值「One」和「Two」在第二個下拉列表中完全刪除（或禁用），反之亦然：當用戶在第二個下拉列表中選擇「Four」時，我會喜歡從第一個下拉列表中刪除「Five」。（有點像範圍滑塊）

我知道這應該是可能的一個小jQuery代碼，但任何人都可以解釋如何？

編輯：

加入少量jQuery代碼我周圍玩，我可以選擇的電流值，並獲得一個下拉元素。但是，如何禁用比「From」元素中當前值小的「To」值，反之亦然。

$('[name="from"]').on("change", function() { 
    var currentVal = $(this).attr('value'); 
    var toElem = $(this).next('[name="to"]'); 
});

來源

2013-07-10 Bouke

請告訴你嘗試過什麼？ –

@MohammadAreebSiddiqui我的代碼中的「真實」下拉列表具有'name'屬性，所以我可以在jQuery中選擇它們。我已經嘗試過我自己的onChange，我可以從中獲得選定的值，但是我無法工作的是從其他下拉列表中刪除值（更大或更小）。 – Bouke

將相關代碼添加到您的問題。 –

我已經改變拉曼Chodźka建議一點點所以它不依賴於ID的了，我可以在一個頁面上使用這些下拉列表中的多個代碼。

This is what I've done (jsFiddle)：

$('[name="from"],[name="to"]').change(function() { 
    var e = $(this); 
    var val = parseInt($(this).val()); 
    e.siblings('[name="from"],[name="to"]').find('option').prop('disabled', false).filter(function() { 
    return ((e.attr('name') == 'from') ? parseInt(this.value) < val : parseInt(this.value) > val); 
    }).prop('disabled', true); 
});

來源

2013-07-11 11:39:48 Bouke

您必須添加一個onchange（在現代的瀏覽器使用的onClick上的選項也適用，但我還是建議的onChange）在您選擇的事件調用一個js函數，它確實像什麼人回答在這裏：jQuery remove options from select

我建議增加一些ID來選擇，添加事件監聽器，你可以這樣做$('#idSelect1').change(function() {bla bla})

或者你也可以直接在YOUT HTML添加事件。

來源

2013-07-10 14:56:26 zozo

猜你正在尋找一個動態的選擇列表： http://css-tricks.com/dynamic-dropdowns/

來源

2013-07-10 14:57:26

我猜動態選擇列表可以工作，但是對於只有數字值的列表來說似乎有點「矯枉過正」，對吧？ – Bouke

是的肯定，我只是想通過使用onChange jquery事件，然後在隱藏/禁用剩餘選項上玩的方法的精神;） –

沒有管理與少的代碼來做到這一點。 That's what I've done。

var from = $('#abs-from-1'); 
var to = $('#abs-to-1'); 

from.change(function() { 
    var selectedValue = parseInt($(this).val()); 
    to.find('option').prop('disabled', false).filter(function() { 
     return parseInt(this.value) < selectedValue; 
    }).prop('disabled', true); 
}); 

to.change(function() { 
    var selectedValue = parseInt($(this).val()); 
    from.find('option').prop('disabled', false).filter(function() { 
     return parseInt(this.value) > selectedValue; 
    }).prop('disabled', true); 
});

更新： 使用選項標籤序號索引也可以是一個選項。這是另一個fiddle。

var from = $('#abs-from-1'); 
var to = $('#abs-to-1'); 

from.change(function() { 
    var selectedIndex = this.selectedIndex; 
    to.find('option').prop('disabled', false).filter(function (index) { 
     return index < selectedIndex; 
    }).prop('disabled', true); 
}); 

to.change(function() { 
    var selectedIndex = this.selectedIndex; 
    from.find('option').prop('disabled', false).filter(function (index) { 
     return index > selectedIndex; 
    }).prop('disabled', true); 
});

來源

2013-07-10 15:42:59

有趣的感謝！ –

限制下拉列表的範圍

回答

相關問題