Considerando que:
O próprio jQuery, pelo menos na versão 2, não oferece suporte aos browsers bem antigos;
O IE6, IE7 e até o IE8 estão cada dia mais raros;
O trabalho para tornar o código realmente compatível com estas relíquias exige uma boa dose de trabalho, que pode ser inclusive bem instrutivo para você;
Eu apresento a "tradução" a seguir, que testei apenas no Chrome. O objetivo foi apenas transcrever, literalmente, instrução por instrução do jQuery para um JavaScript simples. Resolvi não utilizar recursos das versões mais recentes, como o querySelector
e o querySelectorAll
, e também não me preocupei em otimizar nem validar nada. Com o código em mãos, você poderá, então, estudar os bugs que ocorram nos browsers em que você testar e, então, editar a resposta com as soluções.
window.addEventListener("load", function() {
var botoes_add = document.getElementsByClassName("botao_add");
for(var i = 0; i < botoes_add.length; i++){
botoes_add[i].addEventListener("click", function(){
var selects = this.parentElement.getElementsByTagName("select");
var input_first = this.parentElement.getElementsByTagName("input")[0];
for(var j = 0; j < selects.length; j++){
var novo_option = document.createElement("option");
novo_option.value = input_first.value;
novo_option.innerHTML = input_first.value;
selects[j].appendChild(novo_option);
}
});
}
var botoes_del = document.getElementsByClassName("botao_del");
for(var i = 0; i < botoes_del.length; i++){
botoes_del[i].addEventListener("click", function(){
var selects = this.parentElement.getElementsByTagName("select");
for(var j = 0; j < selects.length; j++){
var options = selects[j].getElementsByTagName("option");
for(var k = 0; k < selects[j].children.length; k++){
if(selects[j].children[k].selected) selects[j].removeChild(selects[j].children[k]);
}
}
});
}
});
Pelo menos no Chrome 36.0.1985.125 para Linux, no qual testei, tenho certeza que a funcionalidade é idêntica ao jsFiddle que você citou.
Edit: esqueci de colocar o meu pŕoprio jsFiddle, e de dizer que o innerHTML
foi escolhido ao invés do innerText
para permitir a compatibilidade com o Firefox.
Espero que sirva como um primeiro passo para você.
Abraços!