根据文本框中输入的值隐藏下拉列表选项？

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('')); 
});