Question

i’m creating a page which has an link with the external style sheet, now i created few more style sheets and added an drop-down menu in the page, now how to link these options with the external style sheets so that once the user selects an option from the drop-down menu, the style sheet of that page should totally get changed to the new style sheet…how can i do this?

<div style="float:right;padding:26px 0 0 0;color:#fff;"><select>
      <option>please select your choice</option>
<option value="one">green</option>
<option value="two">red</option>
</select>

</div> 

I have the drop-down as above..

Answer 1

    try this :)

1. give a id to your select box say(giveAId)
2. then in jquery function pass this id and apply a change function('this will notice the   the change made in your select box').
3. get it's value from option box 
4. then pass it to the link href like in this example


 <script type="text/javascript">
    $(function() {
        $("#giveAId").change(function(){ //2 step
           var stylesheet = $(this).val(); // 3 step
           $('link').attr('href',stylesheet+ '.css'); //4 step done here
          });
    });

 </script>


    <div  style="float:right;padding:26px 0 0 0;color:#fff;">
       <select id="giveAId"> // 1 step
          <option>please select your choice</option>
          <option value="one">green</option>
          <option value="two">red</option>
        </select>
    </div>