Javascript html选择菜单以提交URL操作_Javascript_Html

Javascript html选择菜单以提交URL操作

javascript html

Javascript html选择菜单以提交URL操作,javascript,html,Javascript,Html,我正在尝试编写一个选项菜单，如下所示： <form> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <i

我正在尝试编写一个选项菜单，如下所示：

<form>
  <select>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
  </select>
 <input type="submit" value="Submit">
</form>

我不知道是否需要任何编程来将所选选项设置为提交输入的操作。


<head>
  <script>
    var urls = [
      /* [0] */ 'http://one.example.net',
      /* [1] */ 'http://two.example.net',
      /* [2] */ 'http://three.example.net',
      /* [3] */'http://four.example.net'
    ];
    function goToURL(s){
      // get selected index and subtract one to get the array's index
      var index = parseInt(s.options[s.selectedIndex].value, 10) - 1; 

      // verify a url exists for th eoption, and if so navigate to it
      urls[index] && window.location = urls[index];
    }
  </script>
</head>

变量URL=[
/* [0] */ 'http://one.example.net',
/* [1] */ 'http://two.example.net',
/* [2] */ 'http://three.example.net',
/* [3] */'http://four.example.net'
];
戈图尔函数（s）{
//获取所选索引并减去1以获取数组的索引
var index=parseInt（s.options[s.selectedIndex]。值，10）-1；
//验证是否存在该选项的url，如果存在，请导航到该url
URL[index]&&window.location=URL[index]；
}

然后将

onchange=“gotour（this）；”

添加到

标记中

快速而肮脏的示例：

您可以使用jQuery完成此操作

$("form").submit(function () {
    var selectVal = $('select').val();
    var url = '';
    if(selectVal == 1) url = 'http://one.example.net';
    else if(selectVal == 2) url = 'http://two.example.net';
    else if(selectVal == 3) url = 'http://three.example.net';
    else if(selectVal == 4) url = 'http://four.example.net';

    if(url != '')
    {
        window.open(url, '_blank');
    }
});

Fiddle:

像这样-给select一个ID并将其添加到头部。不需要对html进行其他更改

var URLs = ["",
  "http://one.example.net",
  "http://two.example.net",
  "http://three.example.net",
  "http://four.example.net"
]
window.onload=function() {
  document.getElementById("select1").onchange=function() {
    var URL = URLs[this.selectedIdex];
    if (URL) location=URL;       
  }
}

或者像这样，因为你想要一个新的标签-浏览器喜欢有一个点击打开新窗口

给表单一个ID，并将

target=“\u blank”

也添加到表单中

window.onload=function() {
  document.getElementById("form1").onsubmit=function() {
    var URL = URLs[this.selectedIdex];
    if (URL) {
      this.action=URL;      
      return true;
    }
    return false;// don't submit  
  }
}

要在php中执行此操作，请提交包含target=“\u blank”的表单，并将数组放在服务器上，然后执行以下操作

header("location:".$urls[$_GET["select"]]);

您将需要JavaScript来执行该操作。将URL设置为选项的值可能是有意义的。使用PHP不可能做到这一点吗？我的最终游戏是一个非js解决方案。这并不优雅，你需要避免默认不提交表单或不提交表单。最好这样做unobtrusively@mplungjan：“我不知道是否有任何编程方式”告诉我要开始basic。我敢打赌，OP是一个简短而甜蜜的解决方案，对于他/她的使用来说，没有理由变得有限。

header("location:".$urls[$_GET["select"]]);