regarding combo boxes using html and javascript

preethi.c · February 11th, 2005, 07:31 AM

I want to use a combo box which dynamically accepts values from the user and the value should be added into the selection list of the combo box options using html and javascript.

preethi

BrianWren · February 11th, 2005, 12:23 PM

I tried many ways of doing this, and wound up having to manipulate the .outerHTML property of the drop-down. Changing the .innerHTML had no effect.
So letâs say you never add carriage returns between the last element and the ending </select>. That means you have 9 characters for the ending.
So you could store all of the outerHTMLâminus the last 9 characters.
Add to that <option value="...">...</option> for each new entry, followed by + </select>.

preethi.c · February 11th, 2005, 11:25 PM

i want to add the options in a combo box dynamically using HTML and Javascript please tell me how to extend the size of the array in the code in this case.

preethi

BrianWren · February 14th, 2005, 11:43 AM

Well, its not an array.

Letâs say your combo is:

Code:

   <select name="sel" id="sel">
       <option value="01" selected>2001</option>
       <option value="02"         >2002</option>
       <option value="03"         >2003</option>
   </select>

and you want to add â2004â on the end.
Further, letâs presume there are no CRs in the html, as I said before. (If you have spaces, CRs, tabs, whatever, Iâll let you do your own character counting...)

So then:

Code:

  function Add_04()
  {
    var ctl = document.all["sel"];           // Set a reference to the control
    var  s  = ctl.outerHTML;                 // Get its contents
    s =  s.substr(0, s.length - 9);          // Get rid of the </select> on the end
    s += "<option value="04">2004</option>"; // Add your new list item(s)
    s += "</select>";                        // Reconstruct the end of the html
    ctl.outerHTML = s;                       // Put the string into the control.
  }

Now your html would be:

Code:

   <select name="sel" id="sel">
       <option value="01" selected>2001</option>
       <option value="02"         >2002</option>
       <option value="03"         >2003</option>
   <option value="04">2004</option></select>

(Note that because of the fairly primitive string handling, the new text went in right where the â</select>â had been, and now â</select>â follows immediately after the last item in the list, with no formatting. The browser wonât care...)

Nickel · March 3rd, 2005, 04:29 AM

Brian.

It works well for me.
But could this codw works in Mozilla browser?

Thanks in advance,
Nickel

pgtips · March 3rd, 2005, 06:36 AM

why not just use the DOM?
function Add04()
{
    var oOption = document.createElement("option");
    oOption.value = "04";
    oOption.innerHTML = "2004";

    var oSelect = document.getElementById("sel");
    oSelect.appendChild(oOption);
}