根據特定值在選擇中顯示選項

我需要根據郵政編碼的某些值在選擇內顯示特定選項。到目前爲止，我設法做了相反的事情，根據zip的值隱藏它，但這太容易遊戲了。根據特定值在選擇中顯示選項

<script type="text/javascript"> 
$(function(){ 
    var $location = $('#ShippingOptions'); 
    $location.data('options', $location.find('option')); //cache the options first up when DOM loads 
    $('#zip').on('change', function() { //on change event 
     $location.html($location.data('options')); //populate the options 
     if ($(this).val() == "12345") { //check for condition 
      $location.find("option[value='300305']").remove(); //remove unwanted option 
     } 
     if ($(this).val() == "54321") { //check for condition 
      $location.find("option[value='300305']").remove(); //remove unwanted option 
     } 

    }); 
}); 

</script> 
<!--Zip--> 
<div class="zip-field"> 
    <label for="zip">Zip Code</label> 
    <input type="number" id="zip" name="zip" /> 
</div> 

<!--Location--> 
<div class="location-field"> 
    <label for="location">Location</label> 
    <select class="shippingDropDown" id="ShippingOptions" name="ShippingOptions"><option value="-1">Choose Shipping Option</option> 
<option value="300305">Free Shipping $0.00</option></select> 
</div>

我沒有權限向選項添加類，它們是由渲染引擎動態生成的。但是，我可以將目標值保持不變。該計劃是默認情況下隱藏它，然後添加條件來顯示它。這不是關於爲選項設置值，而是顯示/隱藏具有特定值的選項

一個小背景故事：與我合作的系統爲我提供了添加各種類型的運輸的選項，一些免費的付費。但是，由於無法辨別/過濾它們之間的差異，特別是通過zip，所以我處於讓用戶選擇免費送貨或付費送貨的熱鬧地位，就像人性一樣，它幾乎毫無意義。所以我的想法是讓用戶輸入他們的zip文件，並顯示免費選項，該選項只能通過價值識別，僅限於那些具有特定zip（完整號碼）而不是其他人的選項。我意識到安全問題並願意與他們一起生活。

有沒有辦法添加/顯示該選項而不是刪除它？有沒有辦法將它設置爲選中狀態？

來源

2014-07-21 Yes I am a cat

據我所知，只是通過設置選擇值'.VAL（）'，你會得到儘可能選擇顯示的相關選項。走這條路怎麼了？ – melancia

我不知道下一步該去哪裏。 –

<select class="zip-list"> 
    <option value="26598">New York</option> 
    <option value="19356">Mexico</option> 
    <option value="26825">Artic Ocean</option> 
    <option value="93583">A Village</option> 
</select> 

<p><input type="text" class="zip-filter" /></p> 

var $zipList = $('.zip-list'); 
var $zipOptions = $('option', $zipList); 
var $zipOptionsAll = $zipOptions.clone(); 

$('.zip-filter').on('change', function() { 
    var filterText = $(this).val(); 
    var $filteredOptions = $zipOptionsAll.filter(function(e) { 
     return $zipOptions.eq(e).val().indexOf(filterText) === 0; 
    }); 
    if ($filteredOptions) { 
     $zipList.empty().append($filteredOptions); 
    } else { 
     $zipList.empty().append($zipOptionsAll); 
    } 
});

小提琴：http://jsfiddle.net/ekEY4/

應該是自我解釋的。請注意，由於您正在聆聽變更事件，因此您必須在更新之前單擊/退出或按下返回鍵，從而放鬆對文本的關注。

我也在做一個「開頭」的字符串檢查（indexOf），因爲我想像一個類似郵政編碼/郵政編碼的東西，您將希望在縮小範圍之前顯示以特定區號開頭的所有結果。這意味着如果你在列表中有「26598」和「26825」，並且他們搜索到了「26」，那麼它們都會出現。「

」當過濾器更改循環並過濾所有以查詢開頭的選項時，如果發現某些設置，則設置這些選項，否則重置爲所有選項，因爲找不到任何選項。

編輯：

哦，你想要的逆 - 容易。只需將indexOf(filterText) === 0更改爲indexOf(filterText) !== 0即可。

小提琴：http://jsfiddle.net/v3ZDE/

來源

2014-07-21 22:25:48

這是逆向工作。我不需要隱藏所有其他選項，除了對應的選項之外，我只需隱藏不適合使用列表中的zip的選項。 –

@YesIamacat我看到了 - 檢查我的編輯 –

根據特定值在選擇中顯示選項

回答

相關問題