I have a simple webpage that adds & deletes options from a select element dynamically. The code works correctly for Chrome & IE, but it fails in Firefox(when I click add nothing happens & the delete button doesn't even show up?)
What do you think I am doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/home开发者_开发技巧page.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script LANGUAGE="JavaScript" type = "text/javascript">
<!--
function addOption()
{
var listbox = document.getElementById( "listbox" );
var lastIndex = listbox.options.length-1;
var newOption = document.createElement( "option" );
newOption.text = "New";
newOption.value = "New";
try
{
listbox.add( newOption, lastIndex ); // standards compliant; doesn't work in IE
}
catch (ex)
{
listbox.add( newOption, listbox.selectedIndex ); // IE only
alert( "In addOption(): " + ex );
}
}
function deleteOption()
{
//alert( "1" );
var listbox = document.getElementById( "listbox" );
var lastIndex = listbox.options.length-1;
if ( lastIndex < 0 )
return;
listbox.remove( lastIndex );
//alert( "2" );
}
-->
</script>
<style type="text/css" media="all">
<!--
div { text-align: center; }
button { width: 100px; height: 20px; }
#listbox { width: 200px; height: 200px;
-->
</style>
</head>
<body>
<div>
<select id="listbox" multiple="multiple">
<option>Test</option>
</select>
<button value="Add" onclick="addOption()"/>
<button value="Delete" onclick="deleteOption()"/>
</div>
</body>
<!-- InstanceEnd -->
</html>
Use:
<button value="Add" onclick="addOption()">Add</button>
<button value="Delete" onclick="deleteOption()">Delete</button>
instead of
<button value="Add" onclick="addOption()"/>
<button value="Delete" onclick="deleteOption()"/>
The button element requires an end tag : http://www.w3.org/TR/html401/interact/forms.html#h-17.5
Also, use
listbox.options.add( newOption, lastIndex );
instead of
listbox.add( newOption, lastIndex );
See here: http://jsfiddle.net/wEFHA/4/
document.createElement('<option>') is working in IE but not in FF.
document.createElement('option') is working in both IE and FF.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论