Questions › Use list instead of option for dropdown select
Matt Asked

I need to be able to change the style of a page based on a dropdown list. I have a dropdown form as an option list, and using JS that are currently selecting from CSS on the page. This needs to apply a separate stylesheet (style1.css, style2.css, etc) on click/change of the dropdown based on the dropdown list item, instead of the option select.

HTML

Option select

<div class="et-select-wrapper">
  <div class="et-select-wrapper" style="margin:0">
     <select id="styleSwitcher">
            <option value="default">Default</option>
            <option value="option2">Option2</option>
        </select>
  </div>
</div>

List Items - NEEDS TO WORK WITH LIST ITEM (BELOW) INSTEAD OF THE ABOVE OPTION

LIST ITEMS

<button class="et-icon-down-arrow" data-toggle="dropdown"><span class="caret"> 
</span> Page Style</button>
<ul class="dropdown-menu" role="menu" id="styleSwitcher">
  <li><a href="#" value="default">Default</a></li>
  <li><a href="#" value="wcag">WCAG</a></li>
</ul>

JavaScript

    window.onload = function() {
  function addEvent(obj, type, fn) {
    if (obj.attachEvent) {
      obj['e' + type + fn] = fn;
      obj[type + fn] = function() {
        obj['e' + type + fn](window.event);
      }
      obj.attachEvent('on' + type, obj[type + fn]);
    } else obj.addEventListener(type, fn, false);
  }

  function switchStyles() {
    var selectedOption = this.options[this.selectedIndex],
      className = selectedOption.value;
    document.body.className = className;
  }
  var styleSwitcher = document.getElementById("styleSwitcher");
  addEvent(styleSwitcher, "change", switchStyles);
}

===========================================================================

SOLUTION

I found the solution for what I needed here: http://test.unintentionallyblank.co.uk/switcher.html

By applying the function setStyleSheet to the li item in the dropdown like so:

<a data-toggle="dropdown"><button class="et-icon-eye"> Style Selector</button>
<ul class="dropdown-menu" role="menu">
  <li><a href="javascript:setStyleSheet('arial')">Arial</a></li>
  <li><a href="javascript:setStyleSheet('open-sans')">Open Sans</a></li>
</ul>

and using the javascript from here: http://test.unintentionallyblank.co.uk/switcherpart1.js

which selects from a list of external stylesheets on the page, I'm able to change the pages style on select from the li list.

Comments :

Is there a good reason why you're using li tags instead of a select?

G-Cyr replied

insert form elements in your list such as label + radio input (hidden or not via css) , and it will work. list on its own is not a form ;)

Matt replied

@rac, how can I rewrite the JS to work with select options instead of li list?

dkellner replied

Matt, I think I might have answered your question.

Matt replied

@dkellner, I'm a bit unsure of the implementation of your answer. I found another way of doing this with jquery, but it still isn't functioning correctly: jsfiddle.net/phgv8tzy


1 Answers :
dkellner answered

Your style switcher (UL) doesn't have a "change" event, it doesn't change when you click things - it's a LIST, not a form control. It's a static element on your page, like a text or something. Bind your switchStyle() on "click" event of LI-s, instead.

Also, consider jQuery. It saves you a lot of work around the events:

$("li").on("click",switchStyles);

UPDATE

I've created a minimal demo of how you can react on LI clicks:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<body>

    <ul>
        <li><a href="#" data-value="1"> Style 1 </a></li>
        <li><a href="#" data-value="2"> Style 2 </a></li>
        <li><a href="#" data-value="3"> Style 3 </a></li>
        <li><a href="#" data-value="4"> Style 4 </a></li>
        <li><a href="#" data-value="5"> Style 5 </a></li>
    </ul>
    <div class="colorMe">
        <br><br><br>
    </div>

    <script>

        function styleSwitcher(x) {
            var colors = ["blue","green","red","purple","orange"];
            $(".colorMe").css("background-color",colors[--x]);
        }


        $("li > a").on("click",function() {

            var n = $(this).data("value");
            styleSwitcher(n);

        });

    </script>

</body>
</html>

(Also a Fiddle for this)
Now you can apply your own method of switching styles.

UPDATE II

Here's another version with changing stylesheets:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<link id="customStyle" rel="stylesheet" href="theme.peace.css">
<body>

    <ul>
        <li><a href="#" data-value="ocean"> Ocean Blue Theme </a></li>
        <li><a href="#" data-value="darko"> Dark Theme </a></li>
        <li><a href="#" data-value="flame"> Flaming Red Theme </a></li>
        <li><a href="#" data-value="peace"> Peaceful Nature Theme </a></li>
        <li><a href="#" data-value="steam"> Steampunk Theme </a></li>
    </ul>
    <div class="colorMe">
        <br><br><br>
    </div>

    <script>

        function styleSwitcher(t) {
            var cssName = "theme."+t+".css";
            document.getElementById("customStyle").setAttribute("href",cssName);  
        }


        $("li > a").on("click",function() {

            var theme = $(this).data("value");
            styleSwitcher(theme);

        });

    </script>

</body>
</html>

Make sure you have to properly named css files (like theme.ocean.css) in the proper directory - or update the name composition part if you have them somewhere else.

Matt replied
Thanks for steering in the right direction. I need to be able to apply this to a dropdown list and choose from an array of style sheets, which are then applied to the head of the page. Here's an edited version of your sample in jsfiddle: jsfiddle.net/phgv8tzy/2. Ideas?;
dkellner replied
Your approach is almost fine - check out this thread: stackoverflow.com/questions/14292997/…;
dkellner replied
@Matt - also there's another update with another example. Give it a try; I can't add a fiddle this time.;
Matt replied
Combining the code from that stackoverflow link and my own, its much closer. It's not functioning though and changing out the stylesheet. jsfiddle.net/33pLezny/2;
dkellner replied
It's because you're assigning a function RESULT to your click events. This: "style1.onclick = swapStyleSheet(...)" - means that you're calling swapStyleSheet and the returned value will go into onclick. Now with your code this thing is not trivial to fix - how'bout trying what I suggested?;