• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Add options to an HTML select box with Javascript

Add options to an HTML select box with Javascript

This Javascript post was going to be about language selection in FCKEditor from a drop down box as a follow up to the previous FCKEditor post but I’ve decided to postphone that post until Friday and look at how to add options to an HTML <select> drop down box with Javascript, because the next FCKEditor post will be doing just that.

The HTML

The example select box is initially unpopulated and the HTML for it looks like this:

<select id="example-select"></select>

Adding hard-coded values

To add a new option to it, with the text “Text 1” displaying in the drop down box, and the value “Value1” being what would be submitted from the form, do this:

var select = document.getElementById("example-select");
select.options[select.options.length] = new Option('Text 1', 'Value1');

Adding options from an array

If you had an array that has name-value pairs and you wanted to use the index from the array as the value for the options and the array value as the text to display, you could do this:

var example_array = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};

var select = document.getElementById("example-select");
for(index in example_array) {
    select.options[select.options.length] = new Option(example_array[index], index);
}

Resetting the select

To reset the select box so it no longer has any options, set the length of the options property to zero like so:

var select = document.getElementById("example-select");
select.options.length = 0;

Displaying the selected option

To do a window.alert to show the current text and value of the selected option do this:

var select = document.getElementById("example-select");
if(select.options.length > 0) {
    window.alert("Text: " + select.options[select.selectedIndex].text + "\nValue: " + select.options[select.selectedIndex].value);
}
else {
    window.alert("Select box is empty");
}

Example in action

And finally, here’s all of the above in action. If you are reading this in a feed reader the Javascript may not work. If it doesn’t then click through to this post in a web browser.

Next post

Friday’s post will look at how to add a language selection drop down box in FCKEditor, using the way of populating a select drop down box with Javascript from an array as shown in this post.

Check Out These Related posts:

  1. Write content into a dynamic Javascript popup from FCKEditor
  2. Using the FCKEditor HTML Editor with PHP
  3. Javascript UNIX timestamp converter
  4. Using optgroup to group options in an HTML select box

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap