How to Use a List Box in an HTA

You don't need years of programming experience to learn how to add a list box to an HTA. HTAs, also known as Hypertext Applications, are Windows applications that run outside a browser on your desktop. Simply double-click one, and it executes using the HTML and JavaScript code you provide. Creating a list box control inside an HTA is similar to adding one to a regular HTML document.

Instructions

    • 1

      Open Notepad and copy the text shown below into a new document:

      <html>
      <head>
      <title>List Box Test</title>

      <HTA:APPLICATION
      ID="Listbox"
      APPLICATIONNAME="Listbox"
      >
      </head>

      This code creates a standard HTA header definition that allows you to enter a title, ID and Application name for the HTA application.

    • 2

      Paste the following code after the code from Step 1:

      <script language="javascript" type="text/javascript">
      function getSelectedItem(listbox) {

      var selectedItem;
      var listObj = document.getElementById(listbox);
      var options = listObj.options;

      if (listObj.selectedIndex > -1) {
      var selectedItem = options[listObj.selectedIndex].value;
      alert("You chose " + selectedItem);
      }

      else {
      selectedItem = "none";
      alert("Please choose a value");
      }

      }
      </script>

      This code creates a JavaScript function that accepts the id value of a listbox and gets its selected item by checking the list box’s "selectedIndex" value as shown above.

    • 3

      Create the list box by adding the following code after the code listed in the previous step:

      <select id="MyListBox" size="3">
      <option value="Red">Red</option>
      <option value="Blue">Blue</option>
      <option value="Green">Greens</option>
      </select>
      <input type="button" value="Show List Box Selection" onclick="return getSelectedItem('MyListBox')" />

      This HTML code creates a basic select element that has three option attributes. Each option defines an item that appears in the list. Adding a size attribute to a select id makes it expand and stay open. This makes it look like a list. The button passes the select’s id value to the JavaScript function described earlier.

Tips & Warnings

  • You probably need more than three items in your list control. Add additional items by adding more option statements below the existing ones. After adding more options, change the select’s size value so that it equals the number of items in the list box.

Related Searches:

References

Resources

Comments

Related Ads

Featured