Question

我正在使用普通的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运行此代码时，它的工作方式正是我想要的;当我从下拉菜单中选择某个内容并按下提交按钮时，特定字母会在“您选择：”之后出现。

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

Answer 1

默认情况下，表单中的<button>会提交加载表单操作网址的表单，如果没有，则提交相同页面。
只需将按钮类型更改为按钮即可阻止其提交表单。

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

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

Javascript提交按钮不起作用

2 个答案: