在 HTML 事件中使用不同的参数调用不同的 Javascript 函数答案

【问题标题】：Calling different Javascript functions in HTML event with different arguments在 HTML 事件中使用不同的参数调用不同的 Javascript 函数
【发布时间】：2011-10-06 18:25:52
【问题描述】：

我有一个 html 下拉列表，其中包含项目“Hello”和“Goodbye”。

我想要做的是根据用户从下拉列表中选择的内容调用 javascript 函数，根据选择的值调用不同的函数。我也想把下拉列表项的值传入onchange事件函数参数中。

我已经像这样声明了 html 控件：

<select name="hellobye" id="hellobye" class="pulldown" onchange="sayHello or SayGoodbye(*PULLDOWN SELECTED ITEM TEXT HERE*);"></select>

我的 javascript 函数是：

function sayHello(msg)
{
    alert(msg);
}

function sayGoodbye(msg)
{
    alert(msg);
}

请给我一些建议。谢谢。

【问题讨论】：

标签： javascript html web

【解决方案1】：

尝试在 onchange 中使用this.value。

【讨论】：

【解决方案2】：

试试这样的：

function sayHello(msg)
{
    alert(msg);
}

function sayGoodbye(msg)
{
    alert(msg);
}

function say()
{
 var pulldown = document.getElementById("hellobye");
 var selectedValue = pulldown.options[pulldown.selectedIndex].value;

 if(selectedValue == helloMsgValue)
 {
  sayHelo(msg);
 }
 else
 {
   sayGoodbye(msg)
 }
}

<select name="hellobye" id="hellobye" class="pulldown" onchange="say();"></select>

【讨论】：

【解决方案3】：

如果您要将消息传递给函数，那么为什么不只使用一个函数say：

function say(msg)
{
    alert(msg);
}

然后是 HTML 中的 JavaScript：

<select name="hellobye" id="hellobye" class="pulldown" onchange="say(this.value == 'hello' ? 'Hello there' : 'Goodbye to you');">
  <option value="hello">hello</option>
  <option value="goodbye">goodbye</option>
</select>

它使用三元运算符来决定发送 hello 或 goodbye 消息。

statement to test ? execute if true : execute if false

加法：

如果您需要保留单独的功能，那么这应该可以工作

<select name="hellobye" id="hellobye" class="pulldown" onchange="this.value == 'hello' ? sayHello('Hello there') : sayGoodbye('Goodbye to you') ;">
  <option value="hello">hello</option>
  <option value="goodbye">goodbye</option>
</select>

【讨论】：

【解决方案4】：

使用this.value，您可以捕获选择值并在单个函数中使用它，也许是switch() 语句：

function sayAnything(){
  switch(this.value){
    case 'goodbye': alert('I said goodbye!');
    case 'hello' : alert('I said hello!');
    default: alert('Im not sure what I said!');
  }
}

如果您有一个有限且可管理的选择选项列表，那将很有效，如果您没有，那么您可能会在呈现选择而不是每个元素后分配功能，例如：

<select id="list">
  <options*many value="..." />
</select>

Y.one('#list').children().on('click', function(){
  sayAnything(this.value);
});

您必须在某处对 selectedIndex 进行测试，但一般的想法是让 sayAnything() 调用一个通用的，并将所选选项的值传递给该通用方法调用。

【讨论】：