在IE8 / IE9中为Select控件添加选项

时间:2017-11-27 21:53:52

标签: javascript select drop-down-menu internet-explorer-8 html4

我有一个带有选择控件的iframe,我想添加一些选项。我可以使用IE10 +,Firefox和Chrome为iframe中的选项添加选项,但我目前的解决方案不适用于IE8和IE9。

我想找到一种方法来为我的select控件添加选项。我已经尝试过针对其他堆栈溢出问题提出的几个解决方案,但它们似乎对我没用。

以下是我的HTML视图的相关部分:

<!-- In the iframe -->
 <div>
   <div class="inline-block">SelectSomething: </div>
   <select name="select-dialog" id="select-dialog" class="inline-block"></select>
</div>

以下是我的javascript代码片段,它尝试向上面的选择控件添加选项:

// Grab select from iframe
var dialogSelect = document.getElementById('myFrame').contentWindow.document.getElementById('select-dialog');

var isIE8 = (isIE && getIEVersion() === 8);

if (isIE8)
{
  dialogSelect.innerHTML = '';

  // Attempt 1
  var opt = new Option();
  opt.innerHTML = 'Kobe';
  opt.value = 'BlackMamba';

  var opt2 = new Option();
  opt2.innerHTML = 'RKelly';
  opt2.value = 'PiedPiper';

  dialogSelect.appendChild(opt);
  dialogSelect.appendChild(opt2);

  // Attempt 2
  // var opt = dialogSatelliteSelect.options;
  // opt[0] = new Option('Kobe', 'BlackMamba');
  // opt[1] = new Option('R Kelly', 'PiedPiper');

  console.log('innerHTML: ' + dialogSelect.innerHTML);
}
else
{
  // The select is not populated with options in IE8 and IE9. This works with other browsers
  dialogSelect.innerHTML = getOptions();
}

尝试1和2的控制台输出是:

innerHTML: <OPTION value=BlackMamba selected>Kobe</OPTION><OPTION value=PiedPiper>RKelly</OPTION>

即使innerHTML包含我创建的选项,我也无法使用IE8 / IE9选择它们。下拉列表显示为空白,未选择任何内容。

在我的选择控件中显示这些选项需要做什么?我需要采取一些特殊步骤来使用IE8来显示当前的选项吗?

0 个答案:

没有答案