Tutorial for Setting Combobox.Length in JavaScript

Add a little JavaScript to resize your comboboxes

HTML Comboboxes are some of the most useful controls on a web page. These controls give website visitors the ability to view and select items from drop down lists. Although comboboxes initially have a fixed length, you can dynamically change that length by adding and deleting items. You may have seen this process in action when viewing comboboxes that modify their contents as you type. Using JavaScript, you can easily alter the size and contents of all of your combobox controls.

Things You'll Need

• Open your HTML editor or notepad and create a new HTML document.

Instructions

Instructions

1. Create an HTML form and add the following code block:

   <input id="Increase" type="button" value="Increase" onclick="increase()" />
   <input id="Decrease" type="button" value="Decrease" onclick="decrease()" />
   <br /><br /><select name="myComboBox">
   <option value="1">option 1</option>
   <option value="2">option 2</option>
   </select><br />

   This will create two buttons and a combobox named "myComboBox". This combobox will initially have two items: item1 and item2. The buttons will call JavaScript functions when clicked. Those Javascript functions will then modify the length of the combobox by adding or deleting items.

2. Add the following JavaScript function to the "script" section of your HTML:

   function increase() {
   newItems = Array("new1", "new2");
   var mycombo = document.getElementById("myCombobox")
   for (var i = 0; i < newItems.length; i++) {
   var opt = document.createElement("option");
   opt.setAttribute('value', newItems[i]);
   opt.innerHTML = newItems[i];
   document.forms[0].elements["myComboBox"].appendChild(opt);
   }}

   When you click the "Increase" button, this function will dynamically add the two array items to the combobox. Populate this array with values that are meaningful to you. This array, for example, could consist of new items that a site visitor has selected for purchase. By adding those items to the array and calling this function, you could update your combobox to reflect the visitor's current list of shopping cart items.

3. Add this "decrease" function to the "script" section of your HTML:

   function decrease() {
   numberToRemove = 1;
   var myCombo = document.getElementById("myCombobox");
   for (var i = 0; i < numberToRemove; i++) {
   var itemCount = myCombo.size;
   myCombo.remove(myCombo.itemCount);
   }
   }

   This function will decrease the length of the combobox by removing items from the end of the item list. The value that you set in "numberToRemove" will determine the number of items to remove.

4. Open the HTML page in your browser and click the buttons to test your code. Click "Increase" to add items to the combobox; click "Decrease" to remove them. The length (size) of the combobox will never be smaller than zero.

Tips & Warnings

• You do not have to use button clicks to call the "increase" and "decrease" JavaScript functions. Any event can call these functions and initialize the "newItems" array. Add empty items to the array to add blank items to the combobox.

References

• WebReference: Select Box Links Menu
• Molly Holzschlag: "Spring Into HTML and CSS"

Resources

• Java2s: Add or Remove Options From Select Form Control
• W3Schools: JavaScript Tutorial