Select (dropdown) with jcf plugin

Question

I have a country and state dropdown. Our UI designer used jcf plugin which hides real select boxes and converts into a control which look and acts like a dropdown. It works well when I don't have to populate those select box dynamically from client side.

I have a country dropdown and based on selected list my state dropdown should populate. with jcf, I could see the real dropdown ( which is positioned left to -9999px) is populated but only first option shows up in a control that replaces that. Does anyone know how to display/populate the modified control.

Thanks,

Answer 1

Edit: This seems to rebuild the select after I changed it.

$('#myselectbox')[0].jcf.buildDropdown(); // Rebuild based on options
$('#myselectbox')[0].jcf.refreshState(); // Updates to current selected 

I have the exact same question and am in the process of getting the answer from the source.

This jcf.customForms "plugin" doesn't seem to have a lot of documentation. You have probably used the same service (psdtohtml) or similar company to slice your design into HTML. This seems to be some custom javascript related to that service.

A lot can be found by looking at the source or using console.debug(jcf.customForms); but I haven't found the solution yet. Will update when I figure it out.

I've tried lots of stuff like

//jcf.customForms.setOptions(states[0]);
//jcf.customForms.refreshAll();
//jcf.customForms.refreshElement(states[0]);
//states.refreshState();

As for the previous answer, seem odd to have to initTabs(); when you just want to reload a select.

Answer 2

This is the code that worked for me. The code set a select fields value and then refresh and change the value using jcf, select fields will be selected with the option that have value 42

jQuery("#select-element").val("42");

jcf.getInstance(jQuery("#select-element")).refresh()