4

配列プッシュを使用して選択オプションをoptStored配列にロードしようとすると、配列は常に空のままです。chrome、firefox、および safari ではコードは正しく機能しますが、Internet Explorer では機能しません。これに対する回避策はありますか、それとも何もできませんか?

2:12am 10/11/16 更新:コードにいくつかの変更を加えました。以前のコードはコメント アウトされていますが、配列はまだ空のままです! 解決策はありますか？

// array to store select options
var optStored = [];

// filter select 
function filterFruits(el) {
  var value = el.value.toLowerCase();
  var form = el.form;
  var opt, sel = form.fruits;
  if (value == "") {
    restoreOpts();
  } else {
    for (var i = sel.options.length - 1; i >= 0; i--) {
      opt = sel.options[i];
      if (opt.text.toLowerCase().indexOf(value) == -1) {
        sel.removeChild(opt);
      }
    }
  }
}

// Restore select options
function restoreOpts() {
  var sel = document.getElementById('fruits');
  sel.options.length = 0;
  for (var i = 0, iLen = optStored.length; i < iLen; i++) {
    // Recent Update 2:12am 10/11/16:
    // Found aworkaround for restoring the select options 
    // This method works with versions of IE4+
    sel.options[sel.options.length] = new Option(optStored[i].text, optStored[i].value, false, false);

    // Recent Comment Update 2:12am 10/11/16: 
    // Console complains of a type mismatch error
    // sel.add(optStored[i], null); 
  }
}

// Load select options
window.onload = function() {
  var sel = document.getElementById('fruits');
  for (var i = 0, iLen = sel.options.length; i < iLen; i++) {
    // Recent Comment Update 2:12am 10/11/16: 
    // tried this method as well but no luck. 
    // it was also mentioned in the comments below
    // the array still remains empty!
    optStored[i] = sel.options[i];

    //optStored.push(sel.options[i]);
  }
};
<form>
  <input type="text" onkeyup="filterFruits(this);" placeholder="Filter">
  <select id="fruits">
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Cherry</option>
    <option value="4">Banana</option>
  </select>
</form>

4

2 に答える 2

3

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push#Browser_compatibilityによると、IE はpushバージョン 5.5 以降のメソッドのみをサポートしています。代わりに次のことを試してください。

window.onload = function() {
  var sel = document.getElementById('fruits');
  for (var i = 0, iLen = sel.options.length; i < iLen; i++) {
    optStored[i] = sel.options[i];
  }
};
于 2016-10-11T02:25:10.413 に答える
1

F12 を押すと、コンソールにエラーが表示されますか? IE コンソールは、Chrome/Firefox 開発者ツールほど優れたものではありませんが、エラーが表示されるはずです。

リストの最後に新しいオプションを追加する必要があるドキュメントによるとundefined、メソッドの2番目の引数として渡すことについて疑問に思っていますaddnull

before はオプションであり、アイテム item を表すコレクションの要素、または long 型のインデックスを前に挿入する必要があります。このパラメーターが null (またはインデックスが存在しない) の場合、新しい要素はコレクションの末尾に追加されます。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add

于 2016-10-07T13:11:33.627 に答える