使用 Jquery 在 HTML 选择列表中针对 JSON 列表查找不匹配项

Question

我有一个 SelectList 从我的 MVC ActionResult 作为 Json 数据返回：

控制器：

  public JsonResult _ConnectorFilters(string arg1, string arg2, string arg3) {
      //collecting selectlist items ex: 
      listConatenated.Add(newSelectListItem {Value = "Category1", Text = "attribute1"};
      listConatenated.Add(newSelectListItem {Value = "Category1", Text = "attribute2"}
      listConatenated.Add(newSelectListItem {Value = "Category2", Text = "attribute3"};

     return Json(new SelectList(listConcatenated, "Value", "Text"));

 }

我想在我的视图的 <select/> 列表中找到每个 option 项目，它们与我的 JsonResult 中返回的匹配类别具有相同的 value，但 不匹配 em> 文本，并将它们每个的“禁用”属性更改为“真”。

重申一下，如果我当前的 列表中有以下内容：

  <select class="Category1Class">
     <option value="Category1">attribute100<option/>
     <option value="Category1">attribute40<option/>
     <option value="Category1">attribute1<option/>
     <option value="Category1">attribute2<option/>
  </select>

然后我试图写入 success: 结果函数的 jquery 函数将返回：

  <select class="Category1Class">
     <option value="Category1" disabled>attribute100<option/>
     <option value="Category1" disabled>attribute40<option/>
     <option value="Category1">attribute1<option/>
     <option value="Category1">attribute2<option/>
  </select>                     

我希望这是有道理的。与 Json 结果进行比较时，不确定如何开始。提前谢谢你，如果我能更清楚，请告诉我。

Answer 1

假设响应类似于：

[
 { "Value": "Category1","Text": "attribute1"},
 { "Value": "Category1","Text": "attribute2"}
]

您可以使用each() 循环响应并使用filter() 隔离匹配的DOM 元素：

var $opts= $('select.Category1Class option');
/* loop over response as "data" */
$.each(data, function( index, item){
   $opts.filter(function(){
       /* return boolean based on matches */
       return $(this).text() === item.Text && this.value === item.Value;
      /* disable resultant collection */
   }).prop('disabled', true);
});