選中select下拉選單項提交表單

admin發表於2017-11-01

在網頁中，有不少這樣的功能，那就是當選中<select>下拉選單中的一項的時候就會提交表單，比如在一些分頁程式碼中，使用select下拉選單選中某一頁碼，這個時候就會跳轉到的相應的頁面，下面就簡單介紹一下如何實現次功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />  
<title>如何實現選中下拉選單項提交表單-螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:200px; 
  height:200px; 
  margin:0px auto; 
} 
</style> 
<script type="text/javascript">
window.onload=function(){
  var theSelect=document.getElementsByName("num");
  var theForm=document.getElementsByName("myform");
  theSelect[0].onchange=function(){
     theForm[0].submit()
  }
}
</script>
</head> 
<body> 
<div> 
  <form action="http://www.softwhy.com" method="post" name="myform"> 
    <select name="num"> 
      <option value="1" selected>1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
    </select> 
  </form> 
</div> 
</body> 
</html>

通過<select>的onchange事件呼叫document.myform.submit()函式即可。

相關文章