1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

how to create editable combo box in javascrip

Discussion in 'JavaScript and AJAX' started by ragupathi, Aug 2, 2007.

  1. ragupathi

    ragupathi New Member

    Joined:
    Aug 2, 2007
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    how to create editable combo box in javascrip
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,314
    Likes Received:
    372
    Trophy Points:
    83
    Moved to JavaScript forum.
     
  3. Ami Desai

    Ami Desai Member

    Joined:
    Jan 5, 2017
    Messages:
    42
    Likes Received:
    17
    Trophy Points:
    8
    Location:
    Ahmedabad
    Home Page:
    Hi,

    You can check this

    Code:
    <font color='darkslategray'>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    body
    { padding: 100px;
    background: url(http&#58;//www.sitepoint.com/forums/images/editor/code.gif);
    }
    #animals, option
    { font: normal 12px "comic sans ms", sans-serif;
    color: #000;
    background: buttonface;
    }
    span
    { padding: 12px;
    background: white;
    }
    </style>
    <script type="text/javascript">
    function addOption(s)
    { 
    var usr = 'option';
    if (s.value == 'other') 
    {         var o_new, o_old;     
              var bullet = '• ';     
              while (usr == '' || usr == 'option')         
              usr = prompt('Enter a new animal...', 'option');     
              if (null != usr)     
               {         
                   var pos = s.selectedIndex;         
                   o_old = s.options[s.options.length - 2];         
                   o_new = document.createElement('option');     
    o_new.setAttribute('value', usr);                                                                                  o_new.appendChild(document.createTextNode
                   (bullet + usr<font color='red'>.toUpperCase()</font>)); //remove red to maintain case             s.insertBefore(o_new, o_old);
              s.selectedIndex = --pos;
             return true;
         }
    }
    if (!usr || s.value == 'spacer')
    {
    s.selectedIndex = 0;
    return false;
    }
    }
    </script>
    </head>
    <body>
    <form>
    <span>
    <select id="animals" name="animals" onchange="return addOption(this)">
    <option value="" selected="selected">&raquo; animals</option>
    <option value="spacer"></option>
    <option value="aardvark">• AARDVARK</option>
    <option value="bullmoose">• BULL MOOSE</option>
    <option value="catamount">• CATAMOUNT</option>
    <option value="dachsund">• DACHSUND</option>
    <option value="dachsund">• ELEPHANT</option>
    <option value="spacer"></option>
    <option value="other">&raquo; add animal</option>
    </select>
    </span> </form> </body> </html> </font>
    Thanks
     

Share This Page