Ersetzen von Teil von innerHTML Text eines html Auswahl Optionsfeld innerhalb mehrerer Auswahl funktioniert nicht

Question

Die Funktion Die Funktion SelectMultiple kommt mit einem Pop-up-Div mit Kontrollkästchen.
Die Kontrollkästchen sind gleichermaßen zum Auswählen von Optionen und zum Hinzufügen eines Klickereignisses zum Erstellen eines Arrays mit erstellt. Da auf der Seite viele Auswahlmenüs vorhanden sind, wird ein Filterstack-Objekt erstellt, um die Unterscheidung anhand des ausgewählten Menünamens vorzunehmen.

DAS ZIEL UND DAS PROBLEM
Wenn eine Checkbox, die Innerhtml geklickt (nicht der Optionswert) Text der Option wird in dem ersten Optionsfeld der genannten Auswahlmenüs mit Komma Trennung bisher Werke gezeigt werden. Bei Checkbox un-check sollte der von Javascrip entfernte Text die Funktion ersetzen, funktioniert aber nicht.

HINWEIS 1: Checkbox-Ereignisse, die in diesem Moment eine Zeichenfolge erstellen. Vorher habe ich ein Array ausprobiert und auch nicht funktioniert.

HINWEIS 2:
Getestet auf 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 Verwendung ist nicht der richtige Weg für <option> Elemente zu gehen. Verwenden Sie stattdessen die Eigenschaft text der Option.