showing dropdownlist or textbox depending on parent dropdownlist value asp.net mvc2 jquery

I have a dropdownlist with a list of countrynames, when the user selects USA I show him a list of states in another dropdownlist. This feature I can do - similar to Populating Dropdownlist Using MVC2 Based On Another Dropdownlist (Cascading DropDownList)

But if开发者_开发百科 the user selects some other country, I want to show him a textbox so that he can type in the name of state.

How do I do this? Has anyone seen something like this in any site?

Any help will be sincerely apprecaited

Regards Arnab

Disclaimer: I'm not up to date on the ASP.NET MVC Framework tooling, so my default approach might be more manual than other options could provide. However...

What you can do is add both the textbox and the dropdownlist to the page and hide the textbox by default. Similar to this:

<div id="firstDropDown">
  <!-- ASP.NET markup for the first dropdownlist -->
</div>
<div id="secondDropDown">
  <!-- ASP.NET markup for the second dropdownlist -->
</div>
<div id="conditionalTextBox">
  <!-- ASP.NET markup for the conditional textbox -->
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('#conditionalTextBox').hide();
  });
</script>

From the server's perspective all of the controls are displayed on the page just fine, your server-side code won't need to know the difference. Then you'd attach a client-side event to your first dropdownlist to check for specific values and show/hide controls accordingly:

$('#<%= firstDropDownList.ClientID %>').change(function() {
  // add logic here to compare $(this).val() with known values
  // (populated from the server-side during view rendering of course)
  // and if the value matches known values for changing the controls:
  $('#secondDropDown').hide();
  $('#conditionalTextBox').show();
});