替换多个选择中的 html 选择选项字段的部分 innerHTML 文本不起作用

Question

功能
SelectMultiple 函数提供了一个带有复选框的弹出 div。
复选框同样构建以选择选项并添加点击事件来构建 数组。 因为页面上有很多选择菜单，所以构建了一个 filterstack 对象来区分每个选择菜单名称。

目标和问题
当复选框单击innerHTML（不是选项值）时，选项的文本将显示在引用的选择菜单的第一个选项字段中，并以逗号分隔，到目前为止有效。 在复选框上取消选中是否应由 javascripts 替换功能删除的文本，但它不起作用。

注意 1： 此时构建的复选框事件是一个字符串。在此之前，我尝试了一个数组，但也没有用。

注意 2：
在 Firefox 上测试。

var filterstack = {};
var objSelected = {};

function SelectMultiple(field, isAction, paneId) {
  //the first paramater might be "this" or the field id.
  if (typeof field == "string") 
    field = $(field);
  field.onchange = function () {};
  objSelected["" + field.name + ""] = new Array();
  var popdiv = document.createElement('DIV');

  $(popdiv).setStyle({
    backgroundColor: '#fff',
    'z-index': '999999999991',
    'margin': '-24px -2px',
    'width': field.parentNode.offsetWidth + 'px',
    'height': field.options.length * 20 + 31 + 'px',
    'position': 'absolute',
    'display': 'block'
  });

  popdiv.id = "" + field.name + "";
  var selArr = new Array();
  var selinnerHTML = "";

  for (var i = 0; i < field.options.length; i++) {
    var innerdiv = document.createElement('DIV');
    $(innerdiv).setStyle({
      'width': 'auto',
      'position': 'relative'
    });

    var optionlabel = document.createElement('LABEL');
    optionlabel.innerHTML = field.options[i].innerHTML;
    $(optionlabel).setStyle({
      'width': field.offsetWidth - 25 + 'px'
    });

    innerdiv.appendChild(optionlabel);
    var optionfield = document.createElement('INPUT');
    var fieldName = field.name + '[' + field.options[i].value + ']';
    optionfield.type = 'checkbox';
    optionfield.id = fieldName; //p.vendors_id[0]
    optionfield.name = fieldName;
    optionfield.toreplace = field.options[i].innerHTML.toString();

    if (filterstack["" + fieldName + ""] &&
        objSelected["" + field.name + ""]) {
      optionfield.checked = true;
      selArr.push(field.options[i].value);
      if (!(selinnerHTML.match('/' + optionfield.toreplace + '/gi')))
        selinnerHTML += optionfield.toreplace + ', ';
    } else {
      optionfield.checked = false;
      selinnerHTML.replace('/' + optionfield.toreplace + '/gi', '');
    }

    optionfield.value = field.options[i].value;
    $(optionfield).setStyle({
      'width': '10px',
      'display': 'inline'
    });

    optionfield.onclick = function (e) {
      var el = (e) ? e.target : ((window.event.srcElement) ? window.event.srcElement : null);
      var selArr = objSelected["" + field.name + ""];
      if (el.checked) {
        selArr.push(el.value);
        filterstack["" + field.name + ""] = selArr;
        if (!(selinnerHTML.match('/' + el.toreplace + '/gi'))) 
          selinnerHTML += el.toreplace + ', ';
      } else {
        // .replace DOES NOT WORK
        if ((selinnerHTML.match('/' + el.toreplace + '/gi')))
          selinnerHTML.replace('/' + el.toreplace + '/gi', '');
        field.options[field.selectedIndex].innerHTML = selinnerHTML;
        for (var i = 0; i < selArr.length; i++) {
          if (!selArr[i].checked && selArr[i] == el.value) {
            selArr.splice(i, 1);
            break;
          }
        }
        filterstack["" + field.name + ""] = selArr;
      }
    }; //optionfield.onclick

    //ignore empty values
    if (optionfield.value != "") 
      innerdiv.appendChild(optionfield);
    popdiv.appendChild(innerdiv);
  } //for

  field.options[0].innerHTML = selinnerHTML;
  objSelected["" + field.name + ""] = selArr;
  filterstack["" + field.name + ""] = selArr;

  var ok = document.createElement('INPUT');
  ok.type = 'button';
  ok.value = 'OK';
  $(ok).setStyle({
    'width': '55px',
    'margin': '5px 0px 0px 7px',
    'text-align': 'center'
  });

  ok.onclick = function (el) {
    postFilter(null, null, isAction + '/', field.name + '/', filterstack["" + field.name + ""] + '/', paneId);
    field.parentNode.removeChild(popdiv);
  };

  var cancel = document.createElement('INPUT');
  cancel.type = 'button';
  cancel.value = 'Cancel';

  $(cancel).setStyle({
    'width': '55px',
    'margin': '0',
    'text-align': 'center',
    'display': 'inline'
  });

  cancel.onclick = function (el) {
    field.parentNode.removeChild(popdiv);
  };

  popdiv.appendChild(ok);
  popdiv.appendChild(cancel);
  field.parentNode.appendChild(popdiv);
}​

Answer 1

使用innerHTML 不是<option> 元素的方法。请改用该选项的 text 属性。