获取用于调用javascript函数的选项值_Javascript_Html

获取用于调用javascript函数的选项值

javascript html

获取用于调用javascript函数的选项值,javascript,html,Javascript,Html,我正在尝试获取一个下拉菜单来调用javascript函数。选项值似乎默认为调用网页，但我需要它运行javascript。当使用onclick函数时，我使用的javascript非常有效。我如何修改它，使其适用于我的下拉菜单 <html> <head> <link rel="stylesheet" type="text/css" href="mystylesheet.css"> </head> <body> <form&g

我正在尝试获取一个下拉菜单来调用javascript函数。选项值似乎默认为调用网页，但我需要它运行javascript。当使用onclick函数时，我使用的javascript非常有效。我如何修改它，使其适用于我的下拉菜单

<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>


选择员工职位
选择一个
插图画家
科技作家

var iframeExists=false；
函数myFunction1（）{
变量x
如果（！iframe存在）{
x=document.createElement（“IFRAME”）；
iframeExists=true；
}否则{
x=document.getElementsByTagName（“IFRAME”）[0]；
}
x、 setAttribute（“src”http://www.oldgamer60.com/Project/Illustrators.php");
文件.正文.附件（x）；
}
函数myFunction2（）{
var x；
如果（！iframe存在）{
x=document.createElement（“IFRAME”）；
iframeExists=true；
}否则{
x=document.getElementsByTagName（“IFRAME”）[0]；
}
x、 setAttribute（“src”http://www.oldgamer60.com/Project/TechWriters.php");
文件.正文.附件（x）；
}

您的HTML标记不正确。你的

放错地方了

使用以下命令：

<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>

在Javascript中，更改

myFunction1（）

和

myFunction2（）

使其返回一些值，然后添加此函数：

function popup(val){
  console.log('val: ' + val);
  if(val === '1'){
    //  call myFunction1() and get something in return;
  } else {
    //  call myFunction2() and get something in return;    
  }
  window.open(returnedValue,'','');
}

让你的生活更简单

<!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>


选择员工职位
选择一个
插图画家
科技作家

var iframeExists=false；
函数选择_更改（）{
var my_select=document.getElementById（“mySelect”）；
var my\u select\u value=my\u select.options[my\u select.selectedIndex].value；
var x；
如果（！iframe存在）{
x=document.createElement（“IFRAME”）；
iframeExists=true；
}否则{
x=document.getElementsByTagName（“IFRAME”）[0]；
}
如果（我的选择值）{
x、 setAttribute（“src”http://www.oldgamer60.com/Project/" +
我的_选择_值+“.php”）；
文件.正文.附件（x）；
}
}

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

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

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*/
        }
    };

我们有一个对象“functions”，它有两个成员，分别是“myFunction1”和“myFunction2”。然后我们有另一个函数，它从select中提取值并运行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以调用函数选择器，并从“myFunction”值中删除括号

注意：您需要对代码进行布局，使脚本位于表单上方，可能位于标题中，否则“onchange=”无法访问“callFunction”，因为它没有定义

编辑：看看这里的代码，看看它的实际作用：

谢谢你找到它。但这还不是问题的全部。如何获取option value=“myFunction1（）来调用myFunction1（）在javascript中？@Tony我明白你的意思，但这两个函数都没有返回任何内容。你希望它们返回什么？Jason的选项可能是更好的解决方案。如果你有多个不同的函数要调用，请记住这一点。我感谢今晚的帮助。我检查了@Jason选项，它工作正常没错。我需要为页面设置一点样式，但它的工作方式与我所需要的完全相同。因此，您将html tomySelect中的select id和javascript中的getElementById更改为相同？我从未考虑过这一点。

<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>