Option Boxes

 
 
Available Content:
 Your Choices:
 
 

Put this code in your page:

<html>
<head>

<style>
.text
{
FONT: 10pt arial;
COLOR: black
}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function moveOver()
{
var boxLength = document.choiceForm.choiceBox.length;
var selectedItem = document.choiceForm.available.selectedIndex;
var selectedText = document.choiceForm.available.options[selectedItem].text;
var selectedValue = document.choiceForm.available.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.choiceBox.options[i].text;
if (thisitem == selectedText) {
isNew = false;
break;
}
}
}
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.choiceBox.options[boxLength] = newoption;
}
document.choiceForm.available.selectedIndex=-1;
}
function removeMe() {
var boxLength = document.choiceForm.choiceBox.length;
arrSelected = new Array();
var count = 0;
for (i = 0; i < boxLength; i++) {
if (document.choiceForm.choiceBox.options[i].selected) {
arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
}
count++;
}
var x;
for (i = 0; i < boxLength; i++) {
for (x = 0; x < arrSelected.length; x++) {
if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
document.choiceForm.choiceBox.options[i] = null;
}
}
boxLength = document.choiceForm.choiceBox.length;
}
}
function saveMe() {
var strValues = "";
var boxLength = document.choiceForm.choiceBox.length;
var count = 0;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
if (count == 0) {
strValues = document.choiceForm.choiceBox.options[i].value;
}
else {
strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
}
count++;
}
}
if (strValues.length == 0) {
alert("You have not made any selections");
}
else {
alert("Here are the values you've selected:rn" + strValues);
}
}
// End -->
</script>
</HEAD>

<BODY>

<br><br><br>
<center>
<TABLE width="150" border="0" cellpadding="0" cellspacing="0" bgcolor=#F5F4E0>
<tr>
<td colspan=3><img src=images/spacer.gif height=10></td>
</tr>
<tr>
<td><img src=images/spacer.gif width=10></td>
<td bgcolor=white align=center><center>
<form name="choiceForm">
<table border=0 cellpadding="0" cellspacing="3">
<tr>
<td valign="top" width=175> <font class=text>Available Content:</font><br>
<select name="available" size=10 onchange="moveOver();">
<option value=1>Company News
<option value=2>Industry News
<option value=3>Product Updates
<option value=4>Product Specifications
<option value=5>Order History
<option value=6>Order Status
<option value=7>Contacts
<option value=8>Calendar of Events
<option value=9>Scheduler
<option value=10>Notes
</select></td>
<td valign="top">
<font class=text>Your Choices:</font><br>
<select multiple name="choiceBox" style="width:150;" size="10">
</select></td>
</tr>
<tr>
<td colspan=2 height=10 align=center>
<input type="button" value="Remove" onclick="removeMe();">
<input type="button" value="Get Selected Values" onclick="saveMe();"></td>
</tr>
</table>
</form>
</center>
</td>
<td><img src=images/spacer.gif width=10></td>
</tr>
<tr>
<td colspan=3><img src=images/spacer.gif height=10></td>
</tr>
</table>
</center>

</body>
</html>


Related Articles

  • Drop-Down Menus: They Aren't User-Friendly
    On many sites, drop-down menus arent a significant part of the design. However, they appear often enough that they deserve some attention. So exactly how should they be used? For an example of the kind of drop-down menus Im referring to, check out the four menus at the top of this site: Logor.....
  • JavaScript Confirmation Boxes
    A javascript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. A confirmation box will pop up much like an alert box, but will allow the viewer to press an OK or Cancel button.
  • Software To Help You Create A Robots.Txt file
    Robogen is a software for Windows 95, Windows 98,Windows XP and Windows NT based computers which can help you create robots.txt files without having to worry about the correct syntax of a robots.txt file...
  • How Do You Know When You Have Enough Backlinks?
    We all know just how important it is to get as many incoming links as possible. The top search engines love backlinks; and you dont need to be a rocket scientist to figure out that link popularity plays an important role in their ranking algorithms...
  • Containment Explained
    Containment is the effect where one or more elements is shown as part of a group or category, through a visual mechanism. There are two variations of mechanism: strict encapsulation, where the element is totally contained within a box; and softer containment...
  • JavaScript: Redirecting URL
    Whenever you want to generate dynamic pages you often have to resort to using some server side scripting language such as PHP or ASP
  • Basic Rules on Page Layout and Color
    For one to be able to stand out from the rest, one needs to go out of the box, break the rules, and some other clichés that apply to breaking out from the traditional. But before breaking any rule, you have to understand first the basic and foundation of the rule itself...
  • Professional SEO Companies: Do They Really Help Your Business?
    Boosting traffic in search engines does not only make your business website famous. It also advertises the business and helps you save on extra expenses.
  • Optimizing Google Adsense For Better Performance and More Money!
    So you want to make money with Google Adsense? I dont blame you, who doesnt want residual income! This article will show you how to better optimize Google Adsense to make more money from your web site(s)...
  • Basic Services of Web Hosting
    Hosting a website is a must for all those who wish to set up their own websites, either for business of leisure purposes. Web Hosting is a service provided to the prospective customers wherein space is allocated to them to present their websites.

Contact Web Design Outsource and get started today

Need Website Designing, Development, Redesigning, Maintenance and SEO services or help growing your company's web presence? Request a free Quote Now.

Our Services
Instant Messenger
© 2011 WebDesign Solutions Inc.
Privacy Policy | Terms and Conditions | Sitemap | Links