nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

dependant drop down

sachin_sharma78

hi all,

Can any one provide me sample code for dependant drop down. I have two drop down boxes and values of second is depend on value of first like

If user selects "internet" from first drop down box then "book","career","medical" should be populated in second drop down(in different rows)....

Internet --------- (If value of first is )
book --------- (then value of second should be)
career --------- (then value of second should be )
medical --------- (then value of second should be )

Intranet --------- (If value of first is )
deptinfo --------- (then value of second should be )
weather -------- (then value of second should be)

--- and so on -------

regards,
sachin
Teamsite 6.1.0 and win 2k3

Find more posts tagged with

Comments

Migrateduser

Does this even have anything to do with Teamsite? ... or are you attempting to have someone else do your work for you?
Have you even tried to solve this yet or are you being lazy?

Dave

Current Environment(s):
(1) TS 6.1 SP2 on W2K3
(2) TS 6.1 SP1 on W2K
(3) TS 6.1 SP2 on Win2K

jbonifaci

Well, being that he posted it in the templating forum, we can assume he is talking about DCTs. He also mentioned his version of TeamSite. As far as being lazy, the answer is yes, since he is specifically asking for code.

As far as your question. You can accomplish this with FormAPI and onChange events. You can hard code the relationship between the 2 drop downs, create a dynamic data object that stores the relationship when the DCT is loaded or have a callServer that populates the 2nd drop down when the first drop down is changed. Hard coding really isn't an option unless you are in a hurry or helpless, so I would go with one of the other two options.

Michael

Hi Jeff

At the risk of sounding clueless I was hoping you could explain what you meant by 'dynamic data object'? Just curious more than anything about the best way to code these things...

Thanks for your help.

Cheers
Michael

jbonifaci

Micheal,

I just meant that on load of the DCT your FormAPI could do a callServer to a script that builds a javascript object to hold the data for your fields and the relationship between them. Your onChange event for your parent field would then use your data object to build the child field.

~Jeff

sachin_sharma78

I tried to solve this but since its not working thats why i want to know if someone has code for it.

jbonifaci

Why don't you explain how you tried to solve it and post your code that is not working? Then someone can point you in the right direction.

Michael

Thanks Jeff

Now I understand -- nice idea. Saves on having to go back to the database (or whatever) each time they change the droplist. As long as you aren't pulling across heaps of data to the client side of course...

Have you ever tried doing this via an inline instead of a callServer-- can you inline a script that returns a set of script tags with the definition of your variable? I would hope it all ends up in the same variable scoping as the rest of your formAPI code?

Cheers
Michael

dynamicTestNew.rptdesign

tsrookie

Hi Sachim,

I just found your post, I have written this code only recently, here is the answer.

You must use Form API as pointed out in previous posts note the script element at the bottom this is the call to the javascript file that contains the code.

extract from my DCT

<item name="category">
<label>How To Category</label>
<select required="t">
<option value="cat1" label="Category 1" />
<option value="cat2" label="Category 2" />
<option value="cat3" label="Category 3" />
<option value="cat4" label="Category 4" />
</select>
</item>

<item name="topic">
<label>How To Topic</label>
<select required="t">
<option value="Choose Category" label="Choose Category" />
</select>
</item>


<script src="howto.js" location="template-type" />

Now the Form api code (contents of howTo.js) save this in the same location as datacapture.cfg or as indicated by the src attribute of the script element.

function init(){
// register some event handlers
IWEventRegistry.addItemHandler("/category", "onItemChange", changeTopics);

// When editting an existing dcr set the topic selection based on cat chosen
var cat = IWDatacapture.getItem("/category");
var catVal = cat.getOptions()[cat.getValue()].value;

var top = IWDatacapture.getItem("/topic");
var topval = top.getOptions()[top.getValue()].value;

setTopicOptions(catVal, topval);

}

function changeTopics(item){

var catVal = item.getOptions()[item.getValue()].value;

setTopicOptions(catVal, '');

}

function setTopicOptions( catVal, selected ){

newOptions = new Array();
topics = new Array();

switch (catVal)
{
case 'cat1':

topics = new Array("Cat 1 Topic 1", "Cat 1 Topic 2", "Cat 1 Topic 3");

for( i = 0; i < topics.length; i++ ){

isSelected = false;
if( topics == selected ){ isSelected = true; }

newOptions = new Option( topics, topics, isSelected, isSelected );

}

break
case 'cat2':

topics = new Array("Cat 2 Topic 1", "Cat 2 Topic 2", "Cat 2 Topic 3");

for( i = 0; i < topics.length; i++ ){

isSelected = false;
if( topics == selected ){ isSelected = true; }

newOptions = new Option( topics, topics, isSelected, isSelected );

}

break
case 'cat3':

topics = new Array("Cat 3 Topic 1", "Cat 3 Topic 2", "Cat 3 Topic 3");

for( i = 0; i < topics.length; i++ ){

isSelected = false;
if( topics == selected ){ isSelected = true; }

newOptions = new Option( topics, topics, isSelected, isSelected );

}

break
case 'cat4':

topics = new Array("Cat 4 Topic 1", "Cat 4 Topic 2", "Cat 4 Topic 3");

for( i = 0; i < topics.length; i++ ){

isSelected = false;
if( topics == selected ){ isSelected = true; }

newOptions = new Option( topics, topics, isSelected, isSelected );

}

break
default:
newOptions[0] = new Option("Choose category", "Choose category", false, false);

}

IWDatacapture.getItem("/topic").setOptions(newOptions);

}

init();

parameterdisplay.rptdesign