Hi,

I have a pair of dropdown list. A selection in the first box should affect list in the second box.

I tried as per below xhtml file, but when I load the page it is blank with no error.

Please suggest how this can be achieved in Seam framework, any sample ?

Example scenario : Dropdown 1 contains list of states, on selecting any state corresponding cities should be populated in second dropdown (I can read the values from text file).

<ui:define name="bodyScripts">
<script type="text/javascript" src="seam/remoting/resource/remote.js">
        <!--
        // This space intentionally left blank
        //-->
  </script>
 
<script type="text/javascript" src="request.js">
        <!--
        // This space intentionally left blank
        //-->
  </script>

<script type="text/javascript">
//<![CDATA[
        function handleOnChange(dd1)
        {
          var idx = dd1.selectedIndex;
          var val = dd1[idx].text;
          var par = document.forms["frmSelect"];
          var parelmts = par.elements;
          var citysel = parelmts["city"];
          var country = val;
          if (country != "Select country")
          {
           var directory = ""+document.location;
           directory = directory.substr(0, directory.lastIndexOf('/'));

           Http.get({
                        url: "./" +  country + ".txt",
                        callback: fillcity,
                        cache: Http.Cache.Get
                }, [citysel]);
          }
        }
        function fillcity(xmlreply, cityelmt)
        {
          if (xmlreply.status == Http.Status.OK)
          {
           var cityresponse = xmlreply.responseText;
           var cityar = cityresponse.split("|");
           cityelmt.length = 1;
           cityelmt.length = cityar.length;  
           for (o=1; o < cityar.length; o++)
           {
                 cityelmt[o].text = cityar[o];
           }
          }
          else
          {
           alert("Cannot handle the Ajax call.");
          }
        }
        // ]]>
</script>
</ui:define>
                                   
<ui:define name="main">
        <h:form id="select">
        <s:decorate id="experimentTypeDecoration" template="layout/edit.xhtml">
        <ui:define name="label">Country</ui:define>
        <h:selectOneMenu value="country" onchange="handleOnChange(this);">
        <f:selectItem itemValue="Select State" itemLabel="Select State"/>
        <f:selectItem itemValue="NJ" itemLabel="NJ"/>
        <f:selectItem itemValue="CA" itemLabel="CA"/>  
        <f:selectItem itemValue="FL" itemLabel="FL"/>                  
        </h:selectOneMenu>
        </s:decorate>        

        <h:selectOneMenu value="city">
        <f:selectItem itemValue="Select City" itemLabel="Select City"/>
        </h:selectOneMenu>
       
</h:form>
</ui:define>
</ui:composition>