在多個選擇中替換html選擇選項字段的innerHTML文本的一部分不起作用

Question

功能
SelectMultiple函數帶有一個帶有復選框的彈出div。
均等地構建復選框以選擇選項，並添加click事件以構建陣列。 由於頁面上有許多選擇菜單，因此建立了一個filterstack對象，以區分每個選擇菜單名稱。

目的與問題
單擊復選框時，option的innerHTML（不是option值）文本將在引用的選擇菜單的第一個option字段中顯示，並以逗號分隔，到目前為止可以正常工作。 在復選框上取消選中應由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

使用<option>元素不是使用innerHTML的方法。 請改用選項的text屬性。