Friday, February 8, 2013

Dependency dropdown(Selection/Combo box) using aui script

Populate/fill second conbo box values based on first combo box selection.

Sample Code
[sourcecode language="html"]
<aui:script>
AUI().ready('aui-dialog',"node",function(A){
        A.one("#<portlet:namespace />country").on("change",function(e){
var countrySelect=  A.one("#country").val();
A.one("#<portlet:namespace />state").val("");
if(countrySelect == "CA"){
document.<portlet:namespace />fm.state.options.length=0;
document.<portlet:namespace />fm.state.options[0]=new Option("Select State...","");
                    document.<portlet:namespace />fm.state.options[1]=new Option("Canada State1","LA");
                    document.<portlet:namespace />fm.state.options[2]=new Option("Canada State2","LA2");
A.one("label[for='state']").html("Province ");  //Replace the state label to Province
}else{
document.<portlet:namespace />fm.state.options.length=0;
document.<portlet:namespace />fm.state.options[0]=new Option("Select State...","");
document.<portlet:namespace />fm.state.options[1]=new Option("Los angiles","LA");
document.<portlet:namespace />fm.state.options[2]=new Option("Los angiles1","LA1");
A.one("label[for='state']").html("State ");
}
        });

});
<!--<span class="hiddenSpellError" pre=""-->aui:script>
[/sourcecode]

[sourcecode language="html"]
<aui:form name="fm" method="post">
<table>
<tr>
<td><label for="country">Country</label></td>
<aui:select label="" name="country">
<aui:option value="">Select Country...
<aui:option value="US">United State
<aui:option value="CA">Canada
<!--<span class="hiddenSpellError" pre=""-->aui:select>
</tr>
<tr>
&nbsp;
</tr>
<tr>
<td><label for="state">State </label></td>
<aui:select label="State" name="state" label="">
<aui:option value="">Select Country...
<!--<span class="hiddenSpellError" pre=""-->aui:select>
</tr>
</table>
<!--<span class="hiddenSpellError" pre=""-->aui:form>

[/sourcecode]