fakeName
06-01-2003, 04:53 PM
Hi Khalid, and other lookers-on:
I'm nearly there. I've set up a counter variable so I can track whether this is the first or second time the user has attempted to select from list 1.
Then, the removed item is stored in an array. Why an array? I can't say I understand that. Why if only one item is being removed from the multiple select (the second list), would we need an array to store it? I'm obviously missing something here. What's wrong with a variable?
I've tested with alert() to ensure that the counter is working, and it is, and, I've tested to see if the removed option is being stored in the removedItem Array, and it is.
But...
on the second time the user selects from the first select list, not all of the items in the second list are being restored to their initial values. That part of the function only restores the first 5 options. Now, I think this is because of wiping out the option with: service2List.options[i] = null, but I'm not sure what's happening here.
Can someone please shine a light on the problem?
tanks, fakeName
<html lang="en-us">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
<!--
// if the item in ServiceRequested is selected,
// remove it from OtherServiceRequested
var count = 0;
var removedItem = new Array();
function removeOption(form)
{
var service1List = form.ServiceRequested;
var service2List = form.OtherServiceRequested;
for (var i = 0; i < service2List.options.length; i++)
{
if(service1List.options[service1List.selectedIndex].text == service2List.options[i].text)
{
removedItem[i] = service2List.options[i].text;
service2List.options[i] = null;
if ((count == 2)&& (removedItem[i] != service1List.options[service1List.selectedIndex].text))
{
service2List.options[0].text = "Service 1";
service2List.options[1].text = "Service 2";
service2List.options[2].text = "Service 3";
service2List.options[3].text = "Service 4";
service2List.options[4].text = "Service 5";
service2List.options[5].text = "Service 6";
service2List.options[6].text = "Service 7";
} // end inner if
} // end outer if
} // end for loop
count = 2;
}
//-->
</script>
</head>
<body style="background-color:#ffffff;">
<form name="serviceForm" method="post" action="">
<div>
<p>What is your primary service interest?</p>
<select name="ServiceRequested" style="width: 166px;" onChange="removeOption(this.form);">
<option selected>Select a Service</option>
<option>Service 1</option>
<option>Service 2</option>
<option>Service 3</option>
<option>Service 4</option>
<option>Service 5</option>
<option>Service 6</option>
<option>Service 7</option>
</select>
</div>
<div>
<p>Select other services you have an interest in</p>
<select name="OtherServiceRequested" multiple size="3">
<option>Service 1</option>
<option>Service 2</option>
<option>Service 3</option>
<option>Service 4</option>
<option>Service 5</option>
<option>Service 6</option>
<option>Service 7</option>
</select>
</div>
<input type="reset" value="start over">
</form>
</body>
</html>
I'm nearly there. I've set up a counter variable so I can track whether this is the first or second time the user has attempted to select from list 1.
Then, the removed item is stored in an array. Why an array? I can't say I understand that. Why if only one item is being removed from the multiple select (the second list), would we need an array to store it? I'm obviously missing something here. What's wrong with a variable?
I've tested with alert() to ensure that the counter is working, and it is, and, I've tested to see if the removed option is being stored in the removedItem Array, and it is.
But...
on the second time the user selects from the first select list, not all of the items in the second list are being restored to their initial values. That part of the function only restores the first 5 options. Now, I think this is because of wiping out the option with: service2List.options[i] = null, but I'm not sure what's happening here.
Can someone please shine a light on the problem?
tanks, fakeName
<html lang="en-us">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
<!--
// if the item in ServiceRequested is selected,
// remove it from OtherServiceRequested
var count = 0;
var removedItem = new Array();
function removeOption(form)
{
var service1List = form.ServiceRequested;
var service2List = form.OtherServiceRequested;
for (var i = 0; i < service2List.options.length; i++)
{
if(service1List.options[service1List.selectedIndex].text == service2List.options[i].text)
{
removedItem[i] = service2List.options[i].text;
service2List.options[i] = null;
if ((count == 2)&& (removedItem[i] != service1List.options[service1List.selectedIndex].text))
{
service2List.options[0].text = "Service 1";
service2List.options[1].text = "Service 2";
service2List.options[2].text = "Service 3";
service2List.options[3].text = "Service 4";
service2List.options[4].text = "Service 5";
service2List.options[5].text = "Service 6";
service2List.options[6].text = "Service 7";
} // end inner if
} // end outer if
} // end for loop
count = 2;
}
//-->
</script>
</head>
<body style="background-color:#ffffff;">
<form name="serviceForm" method="post" action="">
<div>
<p>What is your primary service interest?</p>
<select name="ServiceRequested" style="width: 166px;" onChange="removeOption(this.form);">
<option selected>Select a Service</option>
<option>Service 1</option>
<option>Service 2</option>
<option>Service 3</option>
<option>Service 4</option>
<option>Service 5</option>
<option>Service 6</option>
<option>Service 7</option>
</select>
</div>
<div>
<p>Select other services you have an interest in</p>
<select name="OtherServiceRequested" multiple size="3">
<option>Service 1</option>
<option>Service 2</option>
<option>Service 3</option>
<option>Service 4</option>
<option>Service 5</option>
<option>Service 6</option>
<option>Service 7</option>
</select>
</div>
<input type="reset" value="start over">
</form>
</body>
</html>