title: Country and State selection using html and Javascript
body: <p>I have applied the logic in view.jsp in Liferay to show the state list on State drop down based on the Country selected from the Country drop down. I have used html and java script to achieve this goal of showing the state drop down for the selected country from drop down list. Currently, when I first load the form, both of the Country and the state label with drop down is displaying. The state drop down is empty at first. Then when I select country, Example: USA, state drop down is changed to the state list related to USA which is working as expected. But, I want to not show the state drop down and State label at first when form is loaded as it will be empty and there will be "Select Country" option only selected in Country drop down. This is not working for me. Any idea what should I do to make State label and drop down to show at first when form loads and just to show state drop down list only when the country is selected from Country drop down?</p>
  
  <p>Below is the html and java script code that I have:</p>
  
  <pre><code>&lt;select name="&lt;portlet:namespace/&gt;Country" id="countryId" onchange="javascript:countryChange()"&gt;
          &lt;option value="0"&gt;Select Country&lt;/option&gt;
          &lt;option value='US'&gt;United States&lt;/option&gt;
          &lt;option value='CA'&gt;Canada&lt;/option&gt;
  &lt;/select&gt;
  &lt;label id="stateLabel"&gt;State:&lt;/label&gt;  
  &lt;select name="&lt;portlet:namespace/&gt;State" id="stateId"&gt;
  &lt;/select&gt;
  
  &lt;!--Country and State Change Javascript--&gt;
  &lt;script&gt;
  function CountryChange() {
      var countryState = [
          [
              'US', [
              ['', 'State/Province'],
              ['AL', 'Alabama'],
              ['AK', 'Alaska'],
              ['AZ', 'Arizona'],
              ['AR', 'Arkansas'],
    ], ],
  [
              'CA', [
              ['', 'State/Province'],
              ['AB', 'Alberta'],
              ['BC', 'British Columbia'],
              ['MB', 'Manitoba'],
              ['NB', 'New Brunswick'],
    ]]
     ];
  
      var countryElement = document.getElementById('countryId');
      var stateElement = document.getElementById('stateId');
      var stateLabelElement = document.getElementById('stateLabel');
  
  if (countryElement &amp;&amp; stateElement) {
          var listOfState = [
              ['XX', 'None']
          ];
  
          var currentCountry = countryElement.options[countryElement.selectedIndex].value;
          for (var i = 0; i &lt; countryState.length; i++) {
              if (currentCountry == countryState[i][0]) {
                  listOfState = countryState[i][1];
              }
          }
          if (listOfstate.length &lt; 2) 
              {
              stateElement.style.display = 'none';
              stateLabelElement.style.display = 'none';
              }
      else 
          {
          stateElement.style.display = 'inline';
          stateLabelElement.style.display = 'inline';
          }
          var selectedState;
          for (var i = 0; i &lt; stateElement.length; i++) {
              if (stateElement.options[i].selected === true) {
                  selectedState = stateElement.options[i].value;
              }     
          }
          stateElement.options.length = 0;
          for (var i = 0; i &lt; listOfState.length; i++) {
              stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
              if (listOfState[i][0] == selectedState) {
                  stateElement.options[i].selected = true;
              }    
          }      
      }
  }
  &lt;/script&gt;
  </code></pre>