Changer style suite à select dans liste + click bouton

Bonjour à tous!

Débutante en informatique, on m'a demandé de réaliser un site où le visiteur a la possibilité de changer de feuilles de styles (préalablement créées: default.css et rouge.css) comme il le souhaite. Pour cela le visiteur doit d'abord selectionner le style voulu dans une liste déroulante, puis l'appliquer grâce au click d'un bouton. (je n'ai pas le choix)

Je n'ai pas de soucis quant au changement de style qui se fait par la fonction function switch_style ( css_title ) .

Mon problème vient du fait que j'ai fait en sorte que la value de mon bouton prend la value de l'élément de la liste sélectionné (function reglestyle()) et appelle tout de suite après la fonction switch_style.

J'arrive à voir le changement de style pendant une demi-seconde puis le style par défaut se remet tout de suite après, car ma liste revient directement à mon premier choix (ici défault) une demi-seconde après le click ..

Quelqu'un aurait la solution ? J'espère avoir été assez claire quant à l'explication de mon problème.

Merci d'avance!

<form>
  <select onchange="listestyle(this)" id="select_id">
     <option value="default">default</option>
     <option value="rouge">rouge</option>       
  </select>
  <input id="btnstyle_id" 
             onclick="reglestyle(this);switch_style(value);" 
             type="submit">
</form>

function reglestyle() { 
 document.getElementById("btnstyle_id").value = document.getElementById("select_id").value;
}

EDIT : Ajout des balises de code (la coloration syntaxique). Explications disponibles ici :ICI Merci d'y penser dans tes prochains messages.