Remplacer une partie du texte innerHTML d'un champ d'option de sélection html dans plusieurs select ne fonctionne pas

Question

LA FONCTION
La fonction SelectMultiple propose une boîte de dialogue contextuelle avec des cases à cocher.
Les cases à cocher sont construites de façon égale pour sélectionner les options et ajouter un événement de clic pour construire un tableau. Beacuse il existe de nombreux menus de sélection sur la page, il est construit un objet filterstack pour faire la distinction par nom de menu de sélection.

LE BUT ET LE PROBLÈME
Lorsqu'une case a cliqué sur le innerHTML (pas la valeur de l'option) texte de l'option sera affiché dans le premier champ d'option de menu de sélection mentionné avec la séparation par des virgules, jusqu'à présent œuvres. Sur la case à cocher décocher si le texte supprimé par javascripts remplace la fonction, mais cela ne fonctionne pas.

NOTE 1: Événements de case à cocher générant en ce moment une chaîne. Avant cela, j'ai essayé un tableau et n'a pas fonctionné aussi.

NOTE 2:
Testé sur 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

L'utilisation innerHTML n'est pas la voie à suivre pour <option> éléments. Utilisez plutôt la propriété text de l'option.