根據文本框中輸入的值隱藏下拉列表選項？

Question

我會盡我所能地盡我所能地解釋我的情況。它的缺點是基於文本框中的值，我需要隱藏下拉列表中的選項。

我有一個建築限制的文本框。它有一個ID，然後因爲有在同一個頁面上的多個建築物的位置數：

<div class="col-md-6 col-sm-6"> 
     <label>Limit</label> 
     @Html.TextBoxFor(m => m.Building.Limit, htmlAttributes: new { id = "buildingLimit-" + Model.LocationNum }) 
    </div> 

下面這個我與不同的ID，但具有相同的位置號碼的下拉列表：

<div class="col-md-6 col-sm-6"> 
     <label>Occurrence</label> 
     @Html.DropDownListFor(m => m.Earthquake.Occurrence, new SelectList(Model.Earthquake.AggregateList, "Value", "Text"), htmlAttributes: new { id = "EarthquakeOcc-" + Model.LocationNum }) 
    </div> 

現在，該下拉列表並不完全綁定到buildingLimit。它顯示可以選擇的幾個不同的值。我想要做的是，如果buildingLimit是250,000美元，那麼下拉列表的值不應大於此值。如果他們再次將其更改爲1,000,000美元，那麼下拉列表需要調整以使其值不超過1,000,000美元

我現在真的一直在努力解決這個問題。這聽起來很簡單，但我不知道如何做到這一點。

這是我到目前爲止有：

$("[id^='buildingLimit-']").change(function() { 
    var location = $(this).attr("id").split("-")[1]; 
    var buildingLimit = $(this).val(); 

    var occArray = []; 
    $("[id^='EarthquakeOcc-']").each(function (i, selected) { 
     occArray[i] = $(selected).val(); 
     alert(occAccary[i]); 
     if (occArray[i] > buildingLimit) { 
      $("[id^='EarthquakeOcc'] option[value = occArray[i]").remove(); 
     } 
    }); 

我知道，有幾件事情不妥之處：當文本框被改變，它只是刪除它纔會起作用。不通過.append（）加回來。此外，這些值是硬編碼的：

public List<SelectListItem> AggregateList 
    { 
     get 
     { 
      if (aggregateList == null) 
      { 
       aggregateList = new List<SelectListItem>(); 
       aggregateList.Add(new SelectListItem { Text = "$100,000", Value = "100000" }); 
       aggregateList.Add(new SelectListItem { Text = "$250,000", Value = "250000" }); 
       aggregateList.Add(new SelectListItem { Text = "$500,000", Value = "500000" }); 
       aggregateList.Add(new SelectListItem { Text = "$1,000,000", Value = "1000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$2,000,000", Value = "2000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$3,000,000", Value = "3000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$4,000,000", Value = "4000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$5,000,000", Value = "5000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$6,000,000", Value = "6000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$7,000,000", Value = "7000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$8,000,000", Value = "8000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$9,000,000", Value = "8000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$10,000,000", Value = "10000000" }); 
       aggregateList.Add(new SelectListItem { Text = "$25,000,000", Value = "25000000" }); 
      } 
      return aggregateList; 
     } 
     set { aggregateList = value; } 
    } 

Answer 1

首先，您需要一個不可變的所有可能值列表。試圖刪除和重新創建選項，同時也保持一切順序正確，這是不必要的痛苦。如果您有可能的值列表，則可以根據文本框條目簡單地從該列表中拉出至所定義的閾值，以重新創建整個選項列表。我也建議使用一個叫做accounting.js的小JS庫。這不是一個嚴格的要求，但它使格式化的貨幣字符串值和實際數值之間來回轉換更容易。

基本上，你只需要值的JS列表：

var MyNamespace = MyNamespace || {}; 

MyNamespace.AggregateList = [ 
    100000, 
    250000, 
    500000, 
    ... 
]; 

如果您希望在您的MVC視圖模型來創建這個列表並將它傳遞到你可以使用類似的看法不要使用以下：

MyNamespace.AggregateList = @Json.Encode(Model.AggregateListValues); 

凡AggregateListValues將是一個List<int>，或者類似的。

接下來，您選擇建築物限制和地震發生場的方式效率非常低。這是更好地把每對字段的包裝裏面，這樣你可以根據其鄰近選擇其它：

<div class="location"> 
    <input id="buildingLimit" /> 
    <select id="EarthquakeOcc"> ... </select> 
</div> 

該代碼是故意簡單地表示發生了什麼;你仍然可以自由地使用目前包裝這些字段的任何其他HTML。只要確保兩者都在一個家長內組合在一起。然後：

$('[id^=buildingLimit]').on('change', function() { 
     var parent = $(this).closest('.location'); 
     var select = $('[id^=EarthquakeOcc]', parent); 
    }); 

而且，它的價值，這釋放您使用原來的ID，而不必手動指定ID，或者可能會更好，你可以添加一個類中的字段，而不是，這樣你就可以根據這個類來選擇它們，而不是從某個字符串開始的id屬性，這對於jQuery來說是一個更便宜的選擇器。 （當你按屬性選擇時，你的選擇器實際上是*[attribute=value]換句話說，jQuery必須選擇DOM中的每個元素，然後過濾掉沒有匹配id值的元素，使用類似input[attribute=value]這樣的選擇器會更好，因爲變窄場下降到只有輸入元素之前jQuery的多搜索每一個然而，類總是會更快，因爲jQuery的可以僅僅依靠本地document.getElementsByClassName）

對於事件處理程序：。

$('[id^=buildingLimit]').on('change', function() { 
    var parent = $(this).closest('.location'); 
    var select = $('[id^=EarthquakeOcc]', parent); 

    // if you choose not to use accounting.js, you just need to ensure that the value 
    // gets turned into a number, using a combination of something like `replace` with 
    // a regex and `parseInt`, etc. 
    var limit = accounting.unformat($(this).val()); 

    var output = []; 
    var i = 0; 
    while (MyNamespace.AggregateList[i] <= limit) { 
     // If you choose not to use accounting.js, you just need to implement your 
     // own logic for formatting the number as you want 
     output.push('<option value="' + MyNamespace.AggregateList[i] + '">$' + accounting.formatNumber(MyNamespace.AggregateList[i]) + '</option>'); 
     i++; 
    } 
    select.html(output.join('')); 
});