Acho que seria mais organizado teres classes de CSS para essas fontes assim:
.serif {
font-family: Times, "Times New Roman", Georgia, serif;
}
.sansserif {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
e depois com JavaScript adicionar ou remover a classe. Poderia ser algo assim:
var textarea = document.getElementById('text');
var select = document.querySelector('select');
select.addEventListener('change', function() {
[].forEach.call(select.children, function(opt, i) {
textarea.classList.toggle(opt.value, i == select.selectedIndex);
});
});
Este código percorre todas as options e usando o .classList.toggle()
coloca ou remove a classe consoante o index da option a ser iterado seja o mesmo que select.selectedIndex
, ou seja a opção escolhida.
Isto partindo do presuposto que dás a cada option
o value
correspondente a cada classe. Por exemplo: <option value="fantasy">Fantasy</option>