Home/ Questions/Q 4566860
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T18:50:54+00:00

I have a drop down full of countries. When they select Canada or US,

  • 0

I have a drop down full of countries. When they select Canada or US, then a separate drop down gets auto populated with states/provinces. If they choose any other country, the 2nd drop down gets populated with “Other” with a blank value.

My question is if they pick another country and th 2nd drop down get’s populated with “Other”, how can I auto display a textbox under the 2nd drop down, and dynamically tie it to the “Other” value. In other words, the value of the “Other” dynamically gets populated with the textbox’s value as they type. So when the form is submitted, the 2nd drop down’s value gets posted with what they typed in the textbox.

Can anyone help?

Here is the jQuery plugin I am using to tie the country and state/province drop downs:
https://github.com/adam12/jquery-state-select

<html>
  <head>
    <title>jQuery State Select Plugin Test</title>
    <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="jquery.selectboxes.pack.js"></script>
    <script type="text/javascript" src="jquery.stateselect.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#country').linkToStates('#province');
    });
    </script>
  </head>
  <body>
    <form>
      <p>
        <label>Province/State</label><br />
        <select name="province" id="province">
          <option value="">Please select a country</option>
        </select>
      </p>
      <p>
        <label>Country</label><br />
        <select name="country" id="country">
          <option>Please select</option>
          <option value="Canada">Canada</option>
          <option value="United States">United States</option>
        </select>
      </p>
    </form>
  </body>

Partial plugin code:

 $.fn.extend({
        linkToStates: function(state_select_id) {
      $(this).change(function() {
        var country = $(this).attr('value');
        $(state_select_id).removeOption(/.*/);
        switch (country) {
          case 'Canada':
            $(state_select_id).addOption(canadian_provinces, false);
            break;
          case 'United States':
            $(state_select_id).addOption(us_states, false);
            break;
          default:
            $(state_select_id).addOption({ '' : 'Other'}, false);
            break;
        }
      });
    }
  });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should have a separate Div:

    <div id="hiddendiv">
    <input type="text" id="othertextbox" />
</div>

    Then:

    $(window).load(function()
{
    $("#hiddendiv").hide();
});

$("#ComboBox").change(function()
{
    if($("#ComboBox option:selected").text() == "Other")
    {
        $("#hiddendiv").show();
    }
});

$("#othertextbox").change(function()
{
    $("#ComboBox").val($("#othertextbox").text());
});

    I haven’t tested this code though, so you may need to tweak it.

    • 0