diff --git a/js/style-select.js b/js/style-select.js
index 54370fba..16bbae72 100644
--- a/js/style-select.js
+++ b/js/style-select.js
@@ -14,24 +14,24 @@
  */
 
 $(document).ready(function() {
-    let stylesDiv = $('div.styles');
     let pages = $('div.pages');
     let stylesSelect = $('<select></select>').css({float:"none"});
     let options = [];
 
     let i = 1;
-    stylesDiv.children().each(function() {
-        let name = this.innerHTML.replace(/(^\[|\]$)/g, '');
-        let opt = $('<option></option>')
-            .html(name)
-            .val(i);
-        if ($(this).hasClass('selected')) {
-            opt.attr('selected', true);
+    for (styleName in styles) {
+        if (styleName) {
+            let opt = $('<option></option>')
+                .html(styleName)
+                .val(i);
+            if (selectedstyle == styleName) {
+                opt.attr('selected', true);
+            }
+            opt.attr('id', 'style-select-' + i);
+            options.push([styleName.toUpperCase (), opt]);
+            i++;
         }
-        options.push([name.toUpperCase (), opt]);
-        $(this).attr('id', 'style-select-' + i);
-        i++;
-    });
+    }
 
     options.sort((a, b) => {
         const keya = a [0];
@@ -48,10 +48,11 @@ $(document).ready(function() {
     });
 
     stylesSelect.change(function() {
-        $('#style-select-' + $(this).val()).click();
+        let sel = $(this).find(":selected")[0];
+        let styleName = sel.innerHTML;
+        changeStyle(styleName, sel);
     });
 
-    stylesDiv.hide();
     pages.after(
         $('<div id="style-select"></div>')
             .append(_('Select theme: '), stylesSelect)