javascript下拉菜单onclick

Question

I've been working at this for a while now, but don't understand what's wrong with my code. I'm sure it's something simple - it always is!

Basically, I have a drop down menu, with some options. I want it to go to a web page when the third option, plumber, is selected. When any of the others are clicked, nothing should happen.

My code so far is:

<select id = 'search'>
<option value="1">Carpenter</option>
<option value="2">Electrician</option>
<option value="3">Plumber</option>
<option value="4">Tiler</option>
<option value="5">Boiler Installation</option>

</select>

Go

And my javascript is:

<script>
function go_button {
if (search.value=="3") {
location="search_results.htm"
}
}

</script>​​​​​​​

But it's not working. Could someone tell me what's wrong?

Thanks.

C.

Answer 1

You can either put a change event on your control via script or add it directly to your control..

Direct Method:

<select id="search" onChange="OnSelectedIndexChange()">

This is the function you need to put in your Script:

//function for changed selection
function OnSelectedIndexChange()
{
if (document.getElementById('search').value == "3"){
    location.href="search_results.htm";
}
}

Add Change event using Script (either JavaScript or JQuery):

I suggest JQuery for doing so (the onSelectedIndexChange function is obsolete here)

$('#search').change( function() {

if(this.val() == "3"){
location.href="search_results.htm";
}

});

If you don't want to use JQuery just add the following code:

    var yourdropdown = document.getElementById('search');
    yourdropdown.Attributes.Add("onChange", "return OnSelectedIndexChange();")

Answer 2

You need to tell javascript which element it is you are interested in.

Use getElementById("search") to return the element then you can look into getting its value.

Answer 3

<select id="search">

I think, there are to many spaces.

getElementById("search").value

I have not used this in a while, but is not it ...

location.href = "search_results.htm";

Somewhat like this gives you access to the object. And last but not least, you need to associate your function "go_button" with an event of the drop down box, something like this:

<select id="search" onClick="go_button();">

Answer 4

我认为 - 如果可能的话 - 使用jQuery或其他js框架，都有内置的select和其他html / dom插件和方法。