使用.filter（）在選擇（列表框）中的編程更改在Chrome中可用，但不能在IE11中工作

Question

我有一個selectionChange事件調用的函數，它將可見選擇框中的選擇複製到隱藏的但相同的選擇框。我使用的代碼在Chrome中運行，但在IE11中失敗（刪除隱藏選擇框中的所有選項）。

self.selectionChanged = function() { 
       $('select#ListHidden option').removeAttr("selected"); 
       $('#ListVisible option:selected').each(function (n, item) { 
        $('#ListHidden option').filter(function() { return $.trim($(this).text()) === item.text; }).attr('selected', true); 
       }); 
      }; 

我能夠通過用下面的批量代碼替換.filter（）方法來修復錯誤。

self.selectionChanged = function() { 
       $('select#ListHidden option').prop("selected", false); 
       $('#ListVisible option:selected').each(function (n, item) { 
        var a = $.trim($(this).text()); 
        $('#ListHidden > option').each(function() { 
         var c = $.trim($(this).text()); 
         if (a === c) { 
          $(this).prop('selected', true); 
         } 
        }); 
       }); 
      }; 

它適用於改變的方法，但我只是好奇，爲什麼我的第一次嘗試沒有奏效。我錯誤地實施了這種方法嗎？如果是這樣，那麼爲什麼它在Chrome中工作？有沒有更乾淨的方法來增加兼容性？

Answer 1

如果你在整個過程中使用Knockout或根本沒有使用Knockout，它將會更清潔和更具跨平臺兼容性。 Knockout旨在通過視圖模型來處理DOM的所有操作。將它與jQuery DOM操作相結合可能會導致戰鬥。

它看起來像你在這裏做的工作正是那種如果選擇具有適當的綁定將自動處理的事情。在Knockout中沒有像「selectChange」綁定那樣的東西。應該有一個options綁定和一個value綁定。如果有一個event: { change: selectionChanged }綁定，就把它拿出來用jQuery處理事件。