Return to Course Content Home

JavaScript Example #5

Playing with Lists

This example shows how you can build a list and also disable it. In this section, we'll use a text input field to enter data to put into the list, and a button to enable and disable the list.

....
<script type="text/javascript">
 function addItem(){
   var newItem=document.createElement('option');

   newItem.text=document.getElementById("newItem").value;
   document.getElementById("mySelect").add(newItem, null);

 }

 function enable() {

   document.getElementById("mySelect").disabled=false;

 }

 function disable() {

   document.getElementById("mySelect").disabled=true;

 }

 
</script>
</head>
<body>



<p align="left" class="Normal">First, here is the list: 

   <select id="mySelect">

   </select>

   <p>Item to add to list<input type="text" id="newItem" /></p>

   <p>
<input type=button onclick="addItem()" value="Add Item" />

   <input type=button onClick="disable()" value="Disable List" />

   <input type=button onClick="enable()" value="EnableList" />

   </p>


.....

This produced the following HTML

First, here is the list:

Item to add to list