Question

我正在使用此代码，我发现尝试制作此下拉菜单。 http://www.javascriptkit.com/script/cut183.shtml

忽略我的变量和值，它们都是占位符。

例如，当我点击提交时，它会运行＆＃34; gen＆＃34;功能

无论如何我可以让我的代码根据选择的下拉选项运行不同的功能吗？

<html>
<body>
<form name="doublecombo" form action"index.php" method="POST">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Amazon</option>
<option>Apple</option>
<option>Logitech</option>
<option>Nike</option>
</select>
<select name="stage2" size="1">
<option value="http://javascriptkit.com">Kindle Fire</option>
<option value="http://www.news.com">Kindle DX</option>
<option value="http://www.wired.com">Kindle Charger</option>
<option value="http://www.microsoft.com">Kindle Paperweight</option>
</select>
<input type="button" name="test" value="Generate"
onClick="gen()">
</p>

<script>
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Kindle Fire","http://javascriptkit.com")
group[0][1]=new Option("Kindle DX","http://www.news.com")
group[0][2]=new Option("Kindle Charger","http://www.wired.com")
group[0][2]=new Option("Kindle Paperweight","http://www.microsoft.com")

group[1][0]=new Option("MacBook","http://www.cnn.com")
group[1][1]=new Option("iPhone","http://www.abcnews.com")
group[1][2]=new Option("iPad","http://www.yahoo.com")
group[1][3]=new Option("iMac","http://www.apple.com")

group[2][0]=new Option("G602 Wireless Gaming Mouse","http://www.hotbot.com")
group[2][1]=new Option("G19s Gaming Keyboard","http://www.infoseek.com")
group[2][2]=new Option("G430 Surround Sound Gaming Headset","http://www.excite.com")
group[2][3]=new Option("PowerShell Controller","http://www.lycos.com")

group[3][0]=new Option("Nike FuelBand","http://www.nike.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function gen(){
location=temp.options[temp.selectedIndex].value
}

function exampleFunction(){
}

function anotherExampleFunction(){
}
</script>

</form>
</html>
</body>

Answer 1

使用Jquery's event handlers：

$(selector).on('click', gen); 
$(selector).on('change', redirect);

这些还有以下简写：

$(selector).click(gen); 
$(selector).change(redirect);

其中selector是您要通过id，类或元素名称或其他类型selectors附加侦听器的元素。

如果是select，您只能使用change事件。查看示例here。

以下是您要查找的内容的示例：demo

var functions = {
    func1: function(){console.log("func1 called")},
    func2: function(){console.log("func2 called")},
    func3: function(){console.log("func3 called")},
}

$( "select" )
  .change(function () {
    var selected = $( "select option:selected" );
    functions[selected.val()]();
  })
  .change();

我选择select元素，并为其附加change事件处理程序。当它改变时，处理函数选择所选的选项（select option:selected表示所选的option是select的子项），然后我只是根据函数对象调用函数。 options＆＃39; value。

根据选择的下拉列表运行特定功能

1 个答案: