View Full Version : Hiding certain options in an selections list

Jul 26th, 2002, 01:08 PM
I dont know if I'm being stupid or not but is it possible to dynamically change options in a list depending on if a value is true or not

I've got a select list

<select name="forSel" size=10>
<option value="accaltadd" selected>Addresses
<option value="accass">Associations
<option value="acccamtouch">Campaign
<option value="acclitreq">Literature Requests
<option value="acccampaign">Response

I want to be able to add other options into this list if i have a value that is true or not

thanks in advance


Jul 26th, 2002, 05:07 PM
First you have some code to check if the value is true or not. Let's say this value is a textbox. In the "onchange=" event handler you'd call a funtion that might look like this:

function isItTrue (myform) {
var theValueIwantToAdd = new String ("a new SELECT element");

if (myform.mytextbox.value = "true"
addNewOption (myform, theValueIwantToAdd);
} // function isItTrue

function addNewOption (theform, theNewValue) {
theform.theselectobjectname.option [theform.theselectobjectname.length] = new Option(theValueIwantToAdd, ,false,false)

A new item will be in the select list automagically - and it will say "a new SELECT element"

AddNewOption adds a new item (<OPTION>) to the <SELECT> object named "theselectobjectname" and puts it as the last one in the list. Here's a breakdown of the new Option statement:

the parameters in order: new Option(the text you want to see - the .text property, a value you don't see - the .value property, "selected" by default - in this example it's not - the .defaultSelected property, is it "selected"? - no it's not in this example - the .selected property

theselectobjectname is the name you gave the select object in the <SELECT> tag.
.option[] This is how you reference individual items in the select list.
length is a SELECT property. Length is always equal to the number of <OPTION>s there are in the <SELECT> object. It is automagically kept up to date as you add or delete to the list.

To delete an item
theform.theselectobjectname.options[i] = null;

the (i-1)th item is deleted from the list. Remember, indexing in Javascript starts with zero.

To hide a certain item in the list
I strongly suspect it's not possible. But as seen above, you can easily add and delete items. You'd just have to write code that adds and deletes items appropriately depending on what other data field is true (as you say) or not.

Jul 26th, 2002, 05:13 PM
Thats Excellent,

thanks for the reply,