Replacing part of innerHTML text of a html select option field within multiple select does not work

THE FUNCTION

The SelectMultiple function comes up with a pop-up div with checkboxes in it.

The checkboxes are built equally to select options and added click event to build up an array. Beacuse there are many select menus on the page there is b开发者_如何学Pythonuilt a filterstack object to make the distinction per select menu name.

THE AIM AND THE PROBLEM

When a checkbox clicked the innerHTML (not the option value) text of option will be shown in the very first option field of referred select menu with comma separation, so far works. On checkbox un-check should the text removed by javascripts replace function, but it not works.

NOTE 1: Checkbox events building at this moment a string. Before this I've tried an array and did not worked too.

NOTE 2:

Tested on 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);
}​

Using innerHTML is not the way to go for <option> elements. Use the option's text property instead.