PDA

Click to See Complete Forum and Search --> : removing <option>s

Webskater
02-06-2003, 05:01 AM
How can I loop through the <option>s in a select box and hide some of them that meet a certain condition?

This is what I need to do.
I am populating the options in a select box from a database with a list of people - everyone in a company. When the page first shows I need to restrict the list to just show everyone at a a particular location - <option value=4>John Smith</option>.

I then need to be able to call a function that will display everyone in the list.

Thanks for any help.
vickers_bits
02-06-2003, 05:18 AM
why don't you post a snippet of the code your currently using
Webskater
02-06-2003, 05:36 AM
<select name=contactlist>
<option value=2>Bill</option>
<option value=2>Fred</option>
<option value3>Jim</option>
<option value=4>Jack</option>
<option value=4>Jill</option>
</select>

When the above first displays on the screen I only want the options with a value=4 to be displayed. I then need a function to show all the options.

So, basically I want to hide some options and then show them.
khalidali63
02-06-2003, 06:47 AM
Why not just create a list box wt the load time that meet your criteria i.e you will be getting options valu=4 from database I presume,if so then create only options that have value 4.

on the other hand here is a rather crude way ( to me ) of doing the same thing.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"></meta>
<meta name="Author" content="Khalid Ali"></meta>
<title>Untitled</title>
<style type="text/css">

</style>
<script type="text/javascript">
/**************************************************************************************
Author : Khalid Ali
Date :
Version : 1.1
Company : NetTech
Description :
***************************************************************************************/

function processLists(flag){
var listA = document.form1.hc;
var listB = document.form1.sc;
alert("valu selected from list ["+flag+"]")

}

function loadSome(){
var listA = document.form1.hc;
var listB = document.form1.sc;
var optArray = new Array();
var tCtr=0;
var len = listA.length;
for(x=0;x<len;x++){
if(listA.options[x].value==4){
optArray[tCtr]=new Array(listA.options[x].value,listA.options[x].text);
tCtr++;
}
}
listB.length = len = optArray.length;
for(x=0;x<len;x++){
listB.options[x].value = optArray[x][0];
listB.options[x].text = optArray[x][1];

}
listB.style.visibility="visible";
}

function populateAll(){
var listA = document.form1.hc;
listA.style.visibility="visible";
}
window.onload=loadSome;
</script>
</head>

<body>
<form name="form1" method="post" action="">
<select name="hc" id="hc" onchange="processLists(1);" style="width:100pt;" style="visibility:hidden;">
<option value=2>Bill</option>
<option value=2>Fred</option>
<option value3>Jim</option>
<option value=4>Jack</option>
<option value=4>Jill</option>
</select>
<select name="sc" id="sc" onchange="processLists(2);" style="width:100pt;" style="visibility:hidden;">
</select><br>
<input type="Button" value="Populate all" onclick="populateAll();"></input>
</form>
<script type="text/javascript">

</script>
</body>
</html>


cheers

Khalid
Webskater
02-06-2003, 07:00 AM
Thanks for your reply, Khalid.

"Why not just create a list box wt the load time that meet your criteria i.e you will be getting options valu=4 from database I presume,if so then create only options that have value 4."

I can't do this because I need all the contacts so I can change the select box to show them all.

I am sure your solution will work but I am trying this at the moment. I am looping through the options array creating new arrays for the option value and option text. Then clearing the select box and re-building the options by looping through the arrays and setting a criteria. My problem is that I have more than one value in the option tag. I have a value and an ID. I am having trouble accessing the values in the ID. Does this make sense?
<option value=4 id=27>John Smith<option>
I need the value of 27 so I can restrict the list to anyone who works at depot 27 who has an job type of 4.
khalidali63
02-06-2003, 07:03 AM
Why don't you try the solution I posted and see if that is what you want..
:-)
Webskater
02-06-2003, 09:01 AM
Originally posted by khalidali63
Why don't you try the solution I posted and see if that is what you want..
:-)
You know how it is Khalid - you won't give up on a bit of code until you find you are banging your head against the wall. I have used your code and it works fine - thanks again. I also got mine working eventually. As you said the solutions seem a bit crude. My method means creating the select list in the normal way (on the server, from the database) then, as soon as the page loads storing the options in an array, emptying the select list and re-populating it. Seems a bit ham-fisted. What I really want to do is hide an option and then display it again. We have to jump through a lot of hoops to avoid another visit to the server.
khalidali63
02-06-2003, 09:08 AM
Originally posted by Webskater
you won't give up on a bit of code until you find you are banging your head against the wall.


I exctly know what you are talking about..

:)

Originally posted by Webskater

What I really want to do is hide an option and then display it again. We have to jump through a lot of hoops to avoid another visit to the server.

The code snippet I posted does exactly what you want,I hope I did not miss anything in your post,

1.You create listbox from the database and hide it.
2. then from that listbox you create another one depending upon your criteria.
3. and you also have the ability to show the hidden listBox as well.

cheers

Khalid
Webskater
02-06-2003, 09:13 AM
No, you did not miss anything. Your solution does everything I need. Again - thanks.