JoeGarrepy.com Java Script Multiple Types of Combo boxes emulating combo boxes in Windows

Programming/
Tools
      Oracle
      JavaScript
      C#

Fun Stuff
      Music
      Martial Arts
      Robotech

Other
      Main

DISCLAIMER

This disclaimer is intended to cover all software/freeware, and other various files which are downloadable through or from this site.
Joe Garrepy, isp, and web host can not be held responsible for any software downloaded from this site. All freeware is downloaded at your own risk. Software which is listed on this site is assumed to work properly, but may or may not have different effects on different computer systems. The same rules apply to these programs. Joe Garrepy assumes no responsibility for those unusual occurrences where software has adverse effects on users computer. Joe Garrepy does not warrant these programs/files, and as such, can offer no guidelines in which to use them. All freeware/software/files, trademarks, service marks, and copyrights are acknowledged as belonging to their owners. Any of these which the owner wishes to be removed will be done so immediately. By downloading any software or viewing pages in which software can be downloaded, you agree to be bound to this agreement.

JoeGarrepy.com Java Script Multiple Types of Combo boxes emulating combo boxes in Windows

Multiple ways of creating single and multiple select combo boxes emulating the enterable combo box that exists in windows. Below are 3 examples using Java Script and DHTML.

Enterable Single Select Combo Box

Allows you to type in the value you want or you can click the button to the right of the field to drop down a list of values to select from.

Multi-Select Combo Box

Allows multiple Items to be selected by holding the CTRL key while clicking the items that you want. You can also use the SHIFT key to select items that are adjacent to each other or you can click and drag the mouse to select multiple adjacent items. To select all items click on the first item in the list and hold the key combination SHIFT CTRL END. All the values selected are stored in a comma delimeted string in a hidden INPUT field.

Enterable Mult-Select Combo box

This object combines the functionality of the Enterable Single Select with the Multi-Select Combo Boxes. You can enter a comma delimited list of values in the displayed field or you can click on the button to the right of the field to drop down a multi select combo box. You can then use all of the key strokes illustrated for the Multi-Select Combo box in the drop down box that appears.

Java Script Portion

<SCRIPT LANGUAGE="JavaScript">
   function getSelected(opt) {
      var selected = new Array();
      var index = 0;
      for (var intLoop = 0; intLoop < opt.length; intLoop++) {
         if ((opt[intLoop].selected) ||
             (opt[intLoop].checked)) {
            index = selected.length;
            selected[index] = new Object;
            selected[index].value = opt[intLoop].value;
            selected[index].index = intLoop;
         }
      }
      return selected;
   }
   function outputSelected(opt,upd,in_del) {
      var sel = getSelected(opt);
      var strSel = "";
       for (var item in sel)
         strSel += sel[item].value + in_del;
      upd.value = strSel;
   }
   function f_set_select_by_list(in_list,in_select)
   {
     var outArray = new Array();
     var strList = in_list + ",";
     var strSearch;
     var intSearch;
     var index = 0;
     for (var intLoop = 0; intLoop < in_select.length; intLoop++)
     {
       strSearch = in_select[intLoop].value + ",";
       intSearch = strList.search(strSearch);
       index = outArray.length;
       outArray[index] = new Object;
       outArray[index].value = in_select[intLoop].value;
       if (intSearch > -1)
       {
         in_select[intLoop].selected = true;
       }
       else
       {
         in_select[intLoop].selected = false;
       }
     }
   }
   function f_go_drop(in_div_layer)
   {
     document.all[in_div_layer].style.height='90px';
     document.all[in_div_layer].style.visibility='visible';
   }
   function f_back_drop(in_div_layer)
   {
     document.all[in_div_layer].style.height='1px';
     document.all[in_div_layer].style.visibility='hidden';
   }
   var toggle_button_flag=1;
   function f_toggle_button(in_btn,in_div_layer)
   {
     if (toggle_button_flag==0)
     {
       in_btn.value="6";
       toggle_button_flag=1;
       f_back_drop(in_div_layer);
     }
     else
     {
       in_btn.value="5";
       toggle_button_flag=0;
       f_go_drop(in_div_layer);
     }
   }
  function f_drop_down()
  {
      document.all.div_cmb_multi_ent.style.height='1px';
  }
</SCRIPT>

Html Portion

 // *** Enterable Single Select Combo Box
 <INPUT VALUE="" TYPE="text" NAME="cmb_sing_ent" SIZE="6" STYLE="height:24;border: 1 solid;margin:0; padding:2px;" MAXLENGTH="6" onBlur="f_set_select_by_list(this.form.cmb_sing_ent.value,this.form.cmb_sing_ent_multi);" ><INPUT TYPE="button" value="6" onClick="f_toggle_button(this.form.btn_cmb_sing_ent_drop,'div_cmb_sing_ent');" style="background:#F5F5F5;width:21; height:24; font-family:webdings;border: 1 solid;margin:0;padding:2px;" name="btn_cmb_sing_ent_drop">
 <br>
 <div id="div_cmb_sing_ent" style="position:absolute; visibility:hidden; z-index:1; background-color: WHITE; layer-background-color: #FFFFCC; border: 0px none #000000; overflow: hidden"">
  <SELECT NAME="cmb_sing_ent_multi" onMouseOut="f_toggle_button(this.form.btn_cmb_sing_ent_drop,'div_cmb_sing_ent');" SIZE="5" onChange="outputSelected(this.form.cmb_sing_ent_multi,this.form.cmb_sing_ent,'')">
 </div>
   <OPTION VALUE="A">A
   <OPTION VALUE="B">B
   <OPTION VALUE="C">C
   <OPTION VALUE="D">D
   <OPTION VALUE="E">E
   <OPTION VALUE="F">F
   <OPTION style="color:#FFFFFF; background-color:#FFFFFF;" VALUE="--ENDOFLIST--">XXXXXXX
 </SELECT>

// *** Multi-Select Combo Box
<SELECT MULTIPLE NAME="cmb_multi" attribute1="MULTIPLE" SIZE="5">
  <OPTION VALUE="A">A
  <OPTION VALUE="B">B
  <OPTION VALUE="C" SELECTED>C
  <OPTION VALUE="D" SELECTED>D
  <OPTION VALUE="E">E
  <OPTION VALUE="F">F
  <OPTION style="color:#FFFFFF; background-color:#FFFFFF;" VALUE="--ENDOFLIST--">XXXXXXXXXXXXXXXXXXXXXXXXXX
</SELECT>

// *** Enterable Mult-Select Combo box
<TEXTAREA NAME="cmb_multi_ent" WRAP="OFF"style="overflow:hidden;height:24;border: 1 solid;margin:0;padding:2px;width:210;" COLS="24" ROWS="1" onBlur="f_set_select_by_list(this.form.cmb_multi_ent.value,this.form.cmb_multi_ent_multi);" >
</TEXTAREA>
<INPUT TYPE="button" value="6" onClick="f_toggle_button(this.form.btn_cmb_multi_ent_drop,'div_cmb_multi_ent');" style="background:#F5F5F5;width:21;height:24;font-family:webdings;border: 1 solid;margin:0;padding:2px;" name="btn_cmb_multi_ent_drop">
<br>
<div id="div_cmb_multi_ent" style="position:absolute; z-index:1; visibility:hidden; background-color: WHITE; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden"">
<SELECT MULTIPLE NAME="cmb_multi_ent_multi" attribute1="MULTIPLE" SIZE="5" onMouseOut="f_toggle_button(this.form.btn_cmb_multi_ent_drop,'div_cmb_multi_ent');" onChange="outputSelected(this.form.cmb_multi_ent_multi,this.form.cmb_multi_ent,',')">
</div>
  <OPTION VALUE="A">A
  <OPTION VALUE="B">B
  <OPTION VALUE="C">C
  <OPTION VALUE="D">D
  <OPTION VALUE="E">E
  <OPTION VALUE="F">F
  <OPTION style="color:#FFFFFF; background-color:#F5F5F5;" VALUE="--ENDOFLIST--">XXXXXXXXXXXXXXXXXXXXXXXXXX
</SELECT>

If you find any bugs or want to contact me I can be reached @ doughjoe77@hotmail.com.