由于需要用JS写了一个双向选择器,在IE中试是没有问题的。但是用谷歌浏览器打开,当完成一次选择后浏览器就自动刷新了,或者是自动提交了,很是郁闷。请问大家有什么好办法让他不刷新吗?多谢指点!代码如下:<html>
<head>
<title>test title</title>
<script language="javascript">
function MoveSingleItem(sel_source, sel_dest) {
if (sel_source.selectedIndex == -1) //源:没有点选任何项目
return; var SelectedText = sel_source.options[sel_source.selectedIndex].text;
var SelectedVal = sel_source.options[sel_source.selectedIndex].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
sel_source.options.remove(sel_source.selectedIndex);
return;
} function MoveAllItems(sel_source, sel_dest) {
if (sel_source.length == 0) //源:没有项目
return; //首先拷贝所有项目到目标:
var sel_source_len = sel_source.length;
for (var j = 0; j < sel_source_len; j++) {
var SelectedText = sel_source.options[j].text;
var SelectedVal = sel_source.options[j].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
} //然后删除“源”所有项目:
while ((k = sel_source.length - 1) >= 0) {
if (sel_source.length == 0) //源:没有项目
break;
sel_source.options.remove(k);
}
} function Submit(frm) {
if (frm.SelectedItem.length != 0)
SelectAll(frm.SelectedItem);
frm.submit();
} function SelectAll(theSel) //选中select中全部项目
{
for (i = 0; i < theSel.length; i++)
theSel.options[i].selected = true;
} </script>
</head>
<body>
<form id="frm" method="post">
<table width="500" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="220" align="center" valign="top">
<select name="WaitSelectItem" id="WaitSelectItem" size="15" multiple="multiple" style="width: 180px;">
<option>id</option>
<option>name</option>
<option>sex</option>
<option>birthday</option>
</select>
</td>
<td width="60" align="center">
<button onclick="MoveSingleItem(WaitSelectItem, SelectedItem)" style="width: 40px;">
></button><br/>
<br>
<button onclick="MoveAllItems(WaitSelectItem, SelectedItem)" style="width: 40px;">
>></button><br/>
<br>
<button onclick="MoveSingleItem(SelectedItem, WaitSelectItem)" style="width: 40px;">
<</button><br/>
<br>
<button onclick="MoveAllItems(SelectedItem, WaitSelectItem)" style="width: 40px;">
<<</button><br/>
<br>
</td>
<td width="220" align="center" valign="top">
<select name="SelectedItem[]" id="SelectedItem" size="15" multiple="multiple" style="width: 180px;">
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" id="submit" name="submit" value=" submit "/>
</td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>test title</title>
<script language="javascript">
function MoveSingleItem(sel_source, sel_dest) {
if (sel_source.selectedIndex == -1) //源:没有点选任何项目
return; var SelectedText = sel_source.options[sel_source.selectedIndex].text;
var SelectedVal = sel_source.options[sel_source.selectedIndex].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
sel_source.options.remove(sel_source.selectedIndex);
return;
} function MoveAllItems(sel_source, sel_dest) {
if (sel_source.length == 0) //源:没有项目
return; //首先拷贝所有项目到目标:
var sel_source_len = sel_source.length;
for (var j = 0; j < sel_source_len; j++) {
var SelectedText = sel_source.options[j].text;
var SelectedVal = sel_source.options[j].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
} //然后删除“源”所有项目:
while ((k = sel_source.length - 1) >= 0) {
if (sel_source.length == 0) //源:没有项目
break;
sel_source.options.remove(k);
}
} function Submit(frm) {
if (frm.SelectedItem.length != 0)
SelectAll(frm.SelectedItem);
frm.submit();
} function SelectAll(theSel) //选中select中全部项目
{
for (i = 0; i < theSel.length; i++)
theSel.options[i].selected = true;
} </script>
</head>
<body>
<form id="frm" method="post">
<table width="500" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="220" align="center" valign="top">
<select name="WaitSelectItem" id="WaitSelectItem" size="15" multiple="multiple" style="width: 180px;">
<option>id</option>
<option>name</option>
<option>sex</option>
<option>birthday</option>
</select>
</td>
<td width="60" align="center">
<button onclick="MoveSingleItem(WaitSelectItem, SelectedItem)" style="width: 40px;">
></button><br/>
<br>
<button onclick="MoveAllItems(WaitSelectItem, SelectedItem)" style="width: 40px;">
>></button><br/>
<br>
<button onclick="MoveSingleItem(SelectedItem, WaitSelectItem)" style="width: 40px;">
<</button><br/>
<br>
<button onclick="MoveAllItems(SelectedItem, WaitSelectItem)" style="width: 40px;">
<<</button><br/>
<br>
</td>
<td width="220" align="center" valign="top">
<select name="SelectedItem[]" id="SelectedItem" size="15" multiple="multiple" style="width: 180px;">
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" id="submit" name="submit" value=" submit "/>
</td>
</tr>
</table>
</form>
</body>
</html>
并且最好不要给submit的按钮指定 id name为submit
HTML <button> 标签
定义和用法
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。浏览器支持
所有主流浏览器都支持 <button> 标签。
重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。
http://www.w3help.org/zh-cn/causes/index.html
各浏览器兼容性问题及bug原理和解决方案。