Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: JS ComboBox Jump to:  
Category: >> JavaScript >> JS ComboBox Bookmark and Share

<< lastnext >>

Snippet Name: JS ComboBox

Description: A simple JavaScript ComboBox which works with IE (version 7.x) and Firefox (version 2.x). It is useful because the standard HTML select box doesn't allow the options to be edited.

A box with an overlapping box are used to simulate a ComboBox. The ComboBox saves and restores its state using cookies. Obtain and save the JavaScript ComboBox source code by clicking the following link comboBox.js. Include and use the ComboBox as follows:






...

ComboBox.Factory(0, "combo1");

c
update
...


ComboBox.Factory(style, id, maxoptions, width) has 4 parameters, the last 2 being optional. Style is an integer (0 or 1), id a string, maxoptions an integer and width an integer. The default value of maxoptions is 4. The default value of width is ignored if style is 0 and set to 100 if style is 1. The id parameter is used to identify the ComboBox so that the two 'exported' functions clear() and update() can be called (see above).

Note that instead of using ComboBox.Factoy(...), the following, more direct, alternative may be used:


var combo1 = ComboBox.Factory(0, "combo1");

Also see:
» Get and set select lists with Javascri...
» Selecting a Random Row
» DHTML Combo Box Dropdown
» TABLE - Using Select Statement With D...
» SELECT: Case insensitive search
» SELECT: Partition Select
» SELECT: Select For Update
» SELECT: Using Functions
» SELECT: Get DISTINCT / UNIQUE values
» SELECT: Get UNIQUE / DISTINCT values
» SELECT: Scalar Select
» SELECT with HAVING Clause
» SELECT with GROUP BY Clause
» SELECT with WHERE Clause
» SELECT with SAMPLE clause
» SELECT placement
» SELECT into a table
» SELECT name columns
» SELECT
» UPDATE: Update from a SELECT statement
» Inserting into SELECT statement
» INSERT with Select
» Build select menu from database
» Build HTML select list from table
» Select (dropdown) list generator
» MYSQL Select time from a date
» Select based on a field that can have ...
» Select distinct/unique entries
» Select maximum value
» Select minimum value

Comment: (none)

Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: March 22nd, 2009

//
// javaScript ComboBox
//
// (C) 2007 jones@tcd.ie
//
// This program is free software; you can redistribute it and/or modify it under 
// the terms of the GNU General Public License as published by the Free Software Foundation; 
// either version 2 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software Foundation Inc.,
// 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
 
// 21/08/07     first version
// 24/08/07 save and restore state
// 26/08/07 now works with Firefox
// 26/08/07 added style 1
// 27/08/07 added optional width parameter
// 28/08/07 don't add empty strings to select box
// 28/08/07 escape cookie values
// 14/09/07 fixed bug selecting first item
//
// code demonstrates the difficulties of getting something simple to work in both IE and Firefox.
//
 
//
// static Factory constructor
//
ComboBox.Factory = FUNCTION(style, id, maxoptions, width)
{
     EVAL("window[\"" + id + "\"] = new ComboBox(" + style + ", \"" + id + "\"" + ((maxoptions == NULL) ? "" : ", " + maxoptions) + ((width == NULL) ? "" : ", " + width) + ");");
}
 
//
// restore state
//
ComboBox.prototype.restoreState = FUNCTION()
{
 
     FUNCTION getCookie(NAME, xdefault) {
          VAR nameEQ = NAME + "=";
          VAR ca = document.cookie.split(';');
          FOR (VAR i = 0; i < ca.length; i++) {
               VAR c = ca[i];
               WHILE (c.charAt(0) == ' ') 
                    c = c.substring(1, c.length);
               IF (c.indexOf(nameEQ) == 0)
                    RETURN unescape(c.substring(nameEQ.length, c.length));
          }
          RETURN xdefault;
     }
 
     THIS.string = getCookie(THIS.id + "string", "");
     THIS.noptions = getCookie(THIS.id + "noptions", 0);
     FOR (i = 0; i < THIS.maxoptions; i++)
          THIS.option[i] = getCookie(THIS.id + "option" + i, "string " + (i+1));
     IF (THIS.noptions == 0)
          THIS.noptions = 2;
 
     //alert("string = \"" + this.string + "\"");
     //alert("noptions = " + this.noptions);
     //for (i = 0; i < this.noptions; i++)
     //     alert(this.option[i]);
 
}
 
//
// save state
//
ComboBox.prototype.saveState = FUNCTION()
{
 
     FUNCTION setCookie(NAME, value, days) {
          expires = "";
          IF (days) {
               VAR date = NEW Date();
               date.setTime(date.getTime() + (days*24*60*60*1000));
               expires = "; expires=" + date.toGMTString();
          }
          document.cookie = NAME + "=" + escape(value) + expires + "; path=/";
     }
 
     //alert("saveState");
 
     setCookie(THIS.id + "string", THIS.txt.value, 100);
     setCookie(THIS.id + "noptions", THIS.options.length, 100);
     FOR (i = 0; i < THIS.options.length; i++)
          setCookie(THIS.id + "option" + i, THIS.options[i].value, 100);
 
     //alert(document.cookie)
 
}
 
//
// constructor
//
FUNCTION ComboBox(style, id, maxoptions, width)
{
     THIS.style = style;
     THIS.id = id;
     THIS.maxoptions = ((maxoptions == NULL) || (maxoptions < 4)) ? 4 : maxoptions;
 
     THIS.isIE = document.all;     // too clever??
     THIS.option = NEW Array();
     THIS.restoreState();
 
     IF (style == 1) {
 
          IF (width == NULL)
               width = 100;
 
          document.writeln("<span style=\"position:relative; width:", width, "px\">");
          document.writeln("  <select size=1 id=\"OPTIONS\" style=\"width:", width, "px\" onchange=\"javascript:", id, ".select();\">");
          FOR (i = 0; i < THIS.noptions; i++)
               document.writeln("  <option value=\"", THIS.option[i], "\">", THIS.option[i], "</option>");
          document.writeln("  </select>");
          document.writeln("<input type=text id=\"TXT\" value=\"", THIS.string, "\" style=\"position:absolute; left:0px; width:", THIS.isIE ? width-18 : width-20, "px", THIS.isIE ? "" : "; top:-1px", "\">");
          document.writeln("</span>");
 
 
     } ELSE {
 
          document.writeln("<select size=", THIS.noptions, " id=\"OPTIONS\" style=\"visibility:hidden; position:absolute; z-Index:999\" onblur=\"javascript:", id, ".hide();\" onclick=\"javascript:", id, ".select();\">");
         FOR (i = 0; i < THIS.noptions; i++)
              document.writeln("  <option value=\"", THIS.option[i], "\" tabIndex=-1>", THIS.option[i], "</option>");
          document.writeln("</select>");
          document.writeln("<input type=text id=\"TXT\" value=\"", THIS.string, "\"", ((THIS.width) ? "" : " style=\"width:" + width + "\""), ">");
          document.writeln("<button on", THIS.isIE ? "mousedown" : "click", "=\"javascript:", id, ".show();\">...</button>");
 
     }
 
     THIS.txt = document.getElementById("TXT");
     THIS.options = document.getElementById("OPTIONS");
     THIS.txt.id = NULL;
     THIS.options.id = NULL;
     THIS.options.selectedIndex = -1;     // {joj 14/9/07}
 
}
 
//
// show
//
ComboBox.prototype.show = FUNCTION() {
     //alert("show");
     THIS.add();                    // re-order
     offx = offy = 0;
     VAR parent = THIS.txt;
     WHILE (parent.offsetParent) {
          offx += parent.offsetLeft;
          offy += parent.offsetTop;
          parent = parent.offsetParent;
     }
     THIS.options.style.top = (offy + THIS.txt.offsetHeight) + "px";
     THIS.options.style.left = offx + "px";
     THIS.options.style.width = THIS.txt.offsetWidth + "px";
     THIS.options.style.visibility = "visible";
     THIS.options.FOCUS();
}
 
//
// select
//
ComboBox.prototype.select = FUNCTION() {
     //alert("select");
     THIS.txt.value = THIS.options[THIS.options.selectedIndex].value;
     THIS.options.selectedIndex = -1;     // {joj 14/9/07}
     IF (THIS.style == 0)
          THIS.options.style.visibility = "hidden";
}
 
//
// clear
//
ComboBox.prototype.clear = FUNCTION() {
     //alert("clear");
     THIS.txt.value = "";
}
 
//
// hide
//
ComboBox.prototype.hide = FUNCTION () {
     //alert("hide");
     THIS.options.style.visibility = "hidden";
     THIS.options.selectedIndex = -1;
}
 
//
// add
//
ComboBox.prototype.add = FUNCTION(str) {
 
     //alert("add");
 
     str = THIS.txt.value;
     IF (str == "")
          RETURN;
 
     //
     // see if option already present
     //
     sz = THIS.options.length;
     FOR (i = 0; i < sz; i++) {
          IF (THIS.options[i].value == str)
               BREAK;
     }
 
     //
     // nothing to do if matches first option
     //
     IF (i == 0)
          RETURN;
 
 
     //
     // NOT found - insert new option
     // found      - re-order to make first option
     //
     IF (i >= sz) {     // NOT found
 
          IF (sz < THIS.maxoptions) {
               THIS.options[sz] = NEW Option('new text','new value');
               sz += 1;
               IF (THIS.style == 0)
                    THIS.options.size = sz;
          }
 
          FOR (i = sz - 1; i > 0; i--)
               THIS.options[i].value = THIS.options[i].innerHTML = THIS.options[i-1].value;
          THIS.options[0].value = THIS.options[0].innerHTML = str;
 
     } ELSE {
 
          value = THIS.options[i].value;
          FOR (j = i; j > 0; j--)
               THIS.options[j].value = THIS.options[j].innerHTML = THIS.options[j-1].value;
          THIS.options[0].value = THIS.options[0].innerHTML = value;
 
     }
 
}
 
//
// update
//
ComboBox.prototype.update = FUNCTION () {
     //alert("update");
     THIS.add();
     THIS.saveState();
     RETURN THIS.txt.value;
}
 


Free
Oracle Magazine
Subscriptions
and Oracle White Papers


SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more
 
Home      :      Code Library      :      Sponsors      :      Privacy      :      Terms of Use      :      Contact Us 102 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?