Filling up a dropdown onChange of another dropdown

, ,
1

Hi,

I’ve two drop downs in

2

Have a server side action to refresh OptionGroup provider for your second dropdown using inputs from the first one. Add a hidden command to invoke this action. Finally, use either Raise On Change control or Invoke Script control to raise this command on change of the first dropdown.

Alex

3

Alex,

Thank you, I tried this, however, my second dropdown is empty initially, due to this, some validation occurs and I get a Validation Error: value is not valid when I submit the portlet using a hidden command on ‘On Change’.

I’ve also tried, using java script onChange,[see code below]. I get the same validation error.

I can get rid of this error only by clicking ‘other’ on the drop down box to ‘true’.

	var selectedCat = CAF.model('#{activePageBean.clientIds['dropdown1']}');
	var dropdown2 = CAF.model('#{activePageBean.clientIds['dropdown2']}');
	if(selectedCat == '1') {
	    dropdown2.removeAll();
		dropdown2.add(new CAF.Select.Item.Model("10", "10"));
		dropdown2.add(new CAF.Select.Item.Model("11", "11"));
		dropdown2.add(new CAF.Select.Item.Model("12", "12"));
		dropdown2.add(new CAF.Select.Item.Model("13", "13"));
		dropdown2.add(new CAF.Select.Item.Model("14", "14"));
		dropdown2.setSelected("11", true);
	}
	if(selectedCat == '2') {
	    dropdown2.removeAll();
		dropdown2.add(new CAF.Select.Item.Model("20", "20"));
		dropdown2.add(new CAF.Select.Item.Model("21", "21"));
		dropdown2.add(new CAF.Select.Item.Model("22", "22"));
		dropdown2.add(new CAF.Select.Item.Model("23", "23"));
		dropdown2.add(new CAF.Select.Item.Model("24", "24"));
		dropdown2.setSelected("22", true);
	}
	if(selectedCat == '3') {
	    dropdown2.removeAll();
		dropdown2.add(new CAF.Select.Item.Model("30", "30"));
		dropdown2.add(new CAF.Select.Item.Model("31", "31"));
		dropdown2.add(new CAF.Select.Item.Model("32", "32"));
		dropdown2.add(new CAF.Select.Item.Model("33", "33"));
		dropdown2.add(new CAF.Select.Item.Model("34", "34"));
		dropdown2.setSelected("33", true);
	}
4

Alex, Thank you very much
I’ve got the problem fixed doing a server side population of the SELECT Option Group.

I’ve done the following -
a] I’ve put an invoke script on the first dropdown
b] On Change, I’ve raised an event that invokes a hidden command
c] the hidden command invokes a server side action to populate second drop down
d] I’ve used Option Group for the second dropdown,

5

Hi Sudheer,

I have the same requirement.

Listing values in 2nd drop down as per the value I select in first drop down.

I saw the discussion, not sure how to link the first and ‘Async hidden command’ and where to write the script. Can you pls share me the sample if you have?

Thanks,
sam

6

No issues… got the solution.
I used the ‘async hidden command’ panel and client-side script in the firstdropdown panel. Which solves my prob…

Thanks.