Home/ Questions/Q 4064366
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T15:50:48+00:00

I have a simple webpage that adds & deletes options from a select element

  • 0

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/homepage.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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0