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?

Refer to this answer: http://stackoverflow.com/a/5024082/754519 — Ram, Jan 15 '13 at 01:03
As mentioned I'd like to keep my event handlers in a separate javascript document. — Benji, Jan 15 '13 at 01:10

score 6 · Accepted Answer · answered Jan 15 '13 at 00:59

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 '13 at 00:59

antejan

2,594
12
15

1

Oh, nice, +1 for using the `value` – Jeff Jan 15 '13 at 01:01
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? – Benji Jan 15 '13 at 01:13
@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. – Nick Jan 15 '13 at 01:41
made fiddle http://jsfiddle.net/QDHLA/1/ - in inspector I can see that links get enabled and disabled states, this should work. – antejan Jan 15 '13 at 01:41
1

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. – Benji Jan 15 '13 at 01:46
I noticed one problem with this code. When chose an option and then reload the page, the drop down menu goes back to the default option. It works in Firefox but not in Chrome. – Benji Jan 15 '13 at 13:23
You saving current setting in cookie and read it on load. Look at this demo http://jsfiddle.net/QDHLA/3/ - added line with `document.getElementById("myList").value = title;`. – antejan Jan 15 '13 at 14:34

Robot Woods · Answer 2 · 2013-01-15T01:18:41.687

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 '13 at 01:18

answered Jan 15 '13 at 00:57

Robot Woods

5,677
2
21
30

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...` – Jeff Jan 15 '13 at 00:59
This doesn't work with the rest of my code. It seems it just jumps to option three no matter what. – Benji Jan 15 '13 at 01:16
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 – Robot Woods Jan 15 '13 at 01:20
Apologies that my comment (above) led to your solution being de-ticked. That wasn't my intention :) – Nick Jan 15 '13 at 02:54

Calling javascript functions from drop down

2 Answers2

Linked