Setting up Dynamic and Linked Dropdowns

Hello,

I would like to setup two dropdowns for Country and State which are linked as in the Dynamic dropdown demo below:
http://demos.chronoengine.com/index.php/chronoforms/dynamic-dropdown

Unable to get the exact and clear steps. I have got both the dropdowns working but am not clear how to link them. Do I have to "Enable Associations" in Advaced tab if "DB Multi Record Loader" of State list or do I have give a "Join Rule" with "Join Type".

Thanks
Amal

Hi Amal,

Please see this FAQ and scroll down to the section on Dynamic Drop-downs.

Bob

Hi again)
I'm tryin to make a some dynamic fields, linked to dropdown's positions, and have a little problem..
I have a dropbox like this one

	
<div class="ccms_form_element cfdiv_select" id="catid1_container_div" style="">
	<label>Категория</label>
	<select size="1" class="" title="" name="catid" id="cat_list">
		<option value="17">Дерт/Слоупстайл</option>
		<option value="18">Памптрек</option>
		<option value="19">4х/Дуал</option>
		<option value="20">Даунхилл</option>
		<option value="21">Фрирайд</option>
		<option value="22">Кросс-кантри</option>
		<option value="23">All-mountain/Эндуро</option>
	</select>
	<div class="clear"></div>
	<div id="error-message-catid"></div>
</div>

And I need to show/hide few additional fields, depending on what position is selected.
I use JS-custom code, based on example from this faq

window.addEvent('domready', function() {
$('cf_container_40').hide();
	$('cf_container_15').hide();
	$('cf_container_37').hide();
	$('cat_list').addEvent('change', function() {
		
	var opt = Number(this.getSelected().getProperty('value').toString());
		
        if ((opt >= 19) && (opt <= 23))
		$('cf_container_37').show();
	else
		$('cf_container_37').hide();
	if ((opt >= 20) && (opt <= 23))
		$('cf_container_15').show();
	else
		$('cf_container_15').hide();
	if ((opt == 22) || (opt == 23)) 
		$('cf_container_40').show();
	else
		$('cf_container_40').hide();		
	});
});

And the problem is this string

$('cat_list').addEvent('change', function() {

firebug says its null.. and I still couldn't understand, where is my mistake..

One question - if I have three pairs of country-state fields on my form then do I need to create three events, create three Dynamic dropdowns.

Thanks
Amal

Hi DrumminManPB ,

Please post a link to the form so I can take a quick look. Your code looks OK to me.

Bob

HI Amal,

If they are separate addresses - they yes you need one Ajax set up for each pair. It's possible to code them together if you are familiar with PHP and JavaScript.

Bob

Hi DrumminManPB ,

Please post a link to the form so I can take a quick look. Your code looks OK to me.

Bob

http://trailbuilders.ru/index.php?option=com_chronoforms&chronoform=AddTrailGeneral
Say, if I need it to translate))

Hi Amal,

Please remove the # from $('#catlist') that is jQuery syntax and will not work with MooTools.

I also suggest that you turn off the Dynamic File setting for the JS files at least while you are debugging.

Bob

thx for pointing the direction))
problem was in form's html, there is no such id in <select>.. althought I change the code.. anyway, it works now.. thx again)