Question

I’m currently using this code to generate CSS toggles for my website. Id like to know if there is a way to modify this to generate a dropdown menu instead to save space for people who want to view the page in a smaller window or have small screen resolution.

            function buildCssToggles() {
            $.each($("[rel=stylesheet]"), function(index, value) { $("#css-display").append($("<input type='button' value='"+value.title+"' onclick='setCss(\""+value.title+"\");'></input>")); });
        }

Answer 1

function buildCssToggles() {
  var dropdown = $( "<select>" );
  dropdown.change( function () {
    setCss( $(this).children( ":selected" ).val() );
  });
  $( "[rel=stylesheet]" ).each( function ( i, value ) {
    dropdown.append( "<option value='" + value.title + "'>" + value.title + "</option>" );
  });
  $( "#css-display" ).append( dropdown );
}