Calling javascript functions from drop down

Question

I have this HTML code at the moment:

Theme
<ul id="dropdown">
    <li> Choose theme
        <ul> 
            <li id="stylesheet1" > <a href="#"> Default </a></li>
            <li id="stylesheet2" > <a href="#"> Theme 1 </a></li>
            <li id="stylesheet3" > <a href="#"> Theme 2 </a></li>
            <li id="stylesheet4" > <a href="#"> Theme 3 </a></li>

        </ul>
    </li>
</ul>

And in a separate javascript document I have this code:

function initate()
{

document.getElementById("myList").onchange = function() {
   var sheet=document.getElementById("myList").value;

   if(sheet=="one"){
   setActiveStyleSheet("theme1");
   }
   else if(sheet=="two"){
   setActiveStyleSheet("theme2");
   }
   else if(sheet="three"){
   setActiveStyleSheet("theme3");
   }
   else{
   setActiveStyleSheet("default");
   }
   return false
};

}

window.onload = initate;

Now this works good but instead of the dropdown I'm using above I'd like to use this HTML code instead:

Select Theme
<form>
<select id="myList" >
  <option id="stylesheet1">Default</option>
  <option id="stylesheet2">Theme 1</option>
  <option id="stylesheet3">Theme 2</option>  
  <option id="stylesheet4">Theme 3</option>
</select>
<form>

As before I would like to have my event handlers in my separate javascript document. I've tried to replace my javascript into these kind of functions:

document.getElementById("stylesheet1").onchange = function() {
   setActiveStyleSheet("default");
   return false
};

But it doesn't work. How do you correct call functions this way?

As mentioned I'd like to keep my event handlers in a separate javascript document. — Benji
– Benji, Commented Jan 15, 2013 at 1:10

antejan · Accepted Answer · 2013-01-15 00:59:15Z

6

Demo: http://jsfiddle.net/zYMFa/

Use values for options and handle change event for select. The value property of select gets value of the selected option, so you can use this.value in change function.

<form>
<select id="myList" >
  <option value="default">Default</option>
  <option value="theme1">Theme 1</option>
  <option value="theme2">Theme 2</option>  
  <option value="theme3">Theme 3</option>
</select>
<form>

document.getElementById("myList").onchange = function() {
   setActiveStyleSheet(this.value);
   return false
};

answered Jan 15, 2013 at 0:59

antejan

2,64416 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jeff Over a year ago

Oh, nice, +1 for using the value

Benji Over a year ago

This seems to be exactly what I want but it doesn't work with the rest of my code which is style sheet changing. Could you help me resolve it if I update my question?

Nick Over a year ago

@Benji This onchange function is neater than the chosen solution, not least because it allows the addition of extra options without changes to the code.

antejan Over a year ago

made fiddle jsfiddle.net/QDHLA/1 - in inspector I can see that links get enabled and disabled states, this should work.

Benji Over a year ago

This didn't work for me before even though it seemed to work as it should but now I tried again and it works so I agree, this is a neater solution. So yes, this solved my problem as well and like you mentioned @Nick even better since I won't have to change my code to add more options.

|

Robot Woods · Accepted Answer · 2013-01-15 01:18:41Z

4

<select id="myList" >
  <option id="stylesheet1" value="default">Default</option>
  <option id="stylesheet2" value="one">Theme 1</option>
  <option id="stylesheet3" value="two">Theme 2</option>  
  <option id="stylesheet4" value="three">Theme 3</option>
</select>

document.getElementById("myList").onchange = function() {
   var sheet=document.getElementById("myList").value;

   if(sheet=="one"){
   setActiveStyleSheet("theme1");
   }
   else if(sheet=="two"){
   setActiveStyleSheet("theme2");
   }
   else if(sheet=="three"){
   setActiveStyleSheet("theme3");
   }
   else{
   setActiveStyleSheet("default");
   }
   return false
};

edited Jan 15, 2013 at 1:18

answered Jan 15, 2013 at 0:57

Robot Woods

5,6872 gold badges24 silver badges30 bronze badges

4 Comments

Jeff Over a year ago

This is the one: you can't put handlers on the option elements, only the parent select - then you have to figure out what is selected. If I remember rightly, though, you should be able to use this instead of document.getElement...

Benji Over a year ago

This doesn't work with the rest of my code. It seems it just jumps to option three no matter what.

Robot Woods Over a year ago

I'd missed a == in the three compare...try fixing that and see if it changes. Also, maybe alert (or console.log) sheet in that function and see if it is defined properly

Nick Over a year ago

Apologies that my comment (above) led to your solution being de-ticked. That wasn't my intention :)

Collectives™ on Stack Overflow

Calling javascript functions from drop down

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related