JavaScript点击下拉菜单

Question

我已经在这方面工作了一段时间，但不理解我的代码出了什么问题。我相信问题很简单-通常都是如此！

基本上，我有一个下拉菜单，其中包含一些选项。当选择第三个选项（水管工）时，我希望它跳转到一个网页。当单击其他任何选项时，不应发生任何事情。

我目前的代码如下：

<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

我的JavaScript代码如下：

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

</script>​​​​​​​

但是它不起作用。有人能告诉我哪里出了问题吗？

谢谢。

C.

- CHarris

Answer 1

你可以通过脚本在控件上添加change event，也可以直接将其添加到控件中。

直接方法：

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

这是您需要在脚本中添加的函数：

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

使用脚本（JavaScript或JQuery）添加更改事件：

我建议使用JQuery来实现（这里的onSelectedIndexChange函数已经过时）。

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

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

});

如果您不想使用JQuery，只需添加以下代码：

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

- t0.

Answer 2

你需要告诉 JavaScript 你感兴趣的元素是哪一个。

使用 getElementById("search") 来返回该元素，然后你可以查找其值。

- Jon Taylor

Answer 3

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

- huncyrus

Answer 4

<select id="search">

我认为，有太多的空格。

getElementById("search").value

我已经有一段时间没有使用过这个了，但是不是...

location.href = "search_results.htm";

有点像这样可以让您访问该对象。最后但并非最不重要的是，您需要将函数“go_button”与下拉框的事件相关联，类似于以下内容：

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

- s-m-e