Javascript 提交按钮不起作用答案

【问题标题】：Javascript Submit Button Doesn't WorkJavascript 提交按钮不起作用
【发布时间】：2014-01-18 18:46:16
【问题描述】：

我正在使用普通的 HTML 下拉菜单进行测试，但在提交按钮时遇到了问题...

以下是我的代码：

<head>
<script>
function submitButton()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").innerHTML=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>

<body>
<form>
<select id="myList">
  <option> </option>
  <option>A</option>
  <option>B</option>  
  <option>C</option>
  <option>D</option>
</select>
<button onclick= 'submitButton()'> Submit </button>
<p>You chose: <span id= 'favorite'> </span></p>
</form>
</body>

现在，当我在 Adobe Dreamweaver 中通过 Live 运行此代码时，它完全按照我的意愿运行；当我从下拉菜单中选择某些内容并按下提交按钮时，特定字母会出现在“您选择：”之后。

但是，当我在 Google Chrome 和 Safari 中运行它时，结果却有所不同。当我从下拉列表中选择并按“提交”时，该字母会出现在其位置一瞬间，然后页面似乎会自动刷新，下拉列表保持其原始值，<span> 为空白。有谁知道为什么，以及如何解决这个问题？

【问题讨论】：

你应该使用老式的输入类型。总是有效。

标签： javascript html refresh submit-button

【解决方案1】：

默认情况下，表单中的<button> 将提交表单，加载表单的操作 url 或相同页面（如果没有）。
只需将按钮类型更改为按钮，这将阻止它提交表单。

<button type="button" onclick= 'submitButton()'> Submit </button>

【讨论】：

【解决方案2】：

你也可以试试这个

<head>
<script>
function submitButton()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").innerHTML=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>

<body>
<form>
<select id="myList">
  <option> </option>
  <option>A</option>
  <option>B</option>  
  <option>C</option>
  <option>D</option>
</select>
<input type="button" onclick= 'submitButton()' value="Submit" /> 
<p>You chose: <span id= 'favorite'> </span></p>
</form>
</body>

【讨论】：