Question

我正在尝试使用下拉菜单来调用javascript函数。选项值似乎默认为调用网页，但我需要它运行javascript而不是。我使用的javascript在使用onclick功能时效果很好。如何修改它以便它适用于我的下拉菜单？

<html>
<head>
 <link rel="stylesheet" type="text/css" href="mystylesheet.css">

</head>
<body>



<form>
<p><b>Select a Staff Position </b>
<select onchange="window.open(this.value,'','');">
<option value="">Select one</option>
    <option value="myFunction1()">Illustrators</option>
    <option value="myFunction2()">Tech Writers</option>
     </p>
</select>

</form>

<script>

var iframeExists = false;

 function myFunction1() {
 var x
 if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
 } else {
  x = document.getElementsByTagName("IFRAME")[0];
 }
 x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
 document.body.appendChild(x);
 }

function myFunction2() {
var x;
if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
} else {
  x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}



</script>







<br>

</body>
</html>

Answer 1

DRY code让您的生活变得更加简单。

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="mystylesheet.css">
</head>
<body>

<form>
<p><b>Select a Staff Position </b>
  <select id="mySelect" onchange="select_change()">
    <option value="">Select one</option>
    <option value="Illustrators">Illustrators</option>
    <option value="TechWriters">Tech Writers</option>
  </select>
</p>
</form>

<script>

var iframeExists = false;

function select_change() {
  var my_select = document.getElementById("mySelect");
  var my_select_value = my_select.options[my_select.selectedIndex].value;

  var x;
  if (!iframeExists) {
    x = document.createElement("IFRAME");
    iframeExists = true;
  } else {
    x = document.getElementsByTagName("IFRAME")[0];
  }
  if(my_select_value) {
    x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
                          my_select_value + ".php");
    document.body.appendChild(x);    
  }
}

</script>

</body>
</html>

Answer 2

您的HTML加价不正确。您的$("#nav_list a").click(function() { $("h1:gt(0)").hide(); $("article").hide(); var href_value = $(this).attr("href"); $("hi:has("+ has_value +")").show(); });放错地方了。

使用此：

</p>

工作演示（让它允许弹出窗口）：https://jsbin.com/xesiyavilu/edit?html,js,output

更新1：

问题是，当您执行<form> <p><b>Select a Staff Position </b> <select onchange="window.open(this.value,'','');"> <option value="">Select one</option> <option value="myFunction1()">Illustrators</option> <option value="myFunction2()">Tech Writers</option> </select> </p> </form>时，<option value="myFunction1()">Illustrators</option>将作为字符串传递。

将您的标记更改为：

myFunction1()

在您的Javascript中，更改<select onchange="popup(this.value)"> <option value="">Select one</option> <option value="1">Illustrators</option> <option value="2">Tech Writers</option> </select>和myFunction1()以使其返回某个值，然后添加此功能：

myFunction2()

Answer 3

不确定这是最好的方法，但它应该提供解决方案。

可以将函数存储在对象中，然后使用以下语法从字符串中调用它们：

object['nameOfFunction']();

所以如果我们像这样设置脚本：

    function callFunction(){
        console.log('change');
        var e = document.getElementById('select');
        var value = e.options[e.selectedIndex].value;
        if (value !== "") {
            functions[value]();
        }
    }
    var functions = {
        myFunction1: function(){
            /*function1 code*/
        },
        myFunction2: function(){
            /*function2 code*/
        }
    };

所以我们有一个对象＆＃39;功能＆＃39;其中有两个成员名为“myFunction1＆＃39;和＆＃39; myFunction2＆＃39;。然后我们有另一个函数从select中提取值并运行所选函数。

你的HTML就像这样：

<form>
    <p><b>Select a Staff Position </b>
        <select id="select" onchange="callFunction()">
            <option value="">Select one</option>
            <option value="myFunction1">Illustrators</option>
            <option value="myFunction2">Tech Writers</option>

    </select></p>

</form>

在html中，我们更改onchange以调用我们的函数选择器并从＆＃39; myFunction＆＃39;中删除括号。值。

注意：您需要列出代码，以便脚本位于表单上方，可能位于标题中，否则＆＃39; onchange =＆＃39;无法访问“callFunction”＆＃39;由于没有定义。

编辑：请查看此处的代码，了解相关信息：http://plnkr.co/edit/?p=preview

获取选项值以调用javascript函数

3 个答案: