How to change dropdownlist to textbox and viceversa based on another dropdownlist

I am developing an application where I am using country (dropdown list) and state (dropdown list).

The question is when 1 select country, it's states will be populated in state dropdownlist but the开发者_运维问答 state list is only provided for USA and other countries are not provided so they have to type in.

So how to change state input type (TEXTBOX OR DROPDOWNLIST) based on USA (country). That is

If USA -DROPDOWNLIST Else Other Countries -TEXTBOX

I would make is a select box by default, then use this jQuery to alter it.

if($(#country_select).val() != 'USA'){
  $('#selectbox').attr('type', 'textbox');
  $('#selectbox option').remove();
}

NOTE

This is a very simple solution, and requires that the default value is USA. I think there is enough info there to build a more robust solution.

Hi ON the country drop down list attach an event onchange and switch over the selectedValue if it is one of the countries isnt have a city hide the drop down list and show the textbox and vise versa .

<select id="country" onchange="check(this)">
  <option value="Select">Select</option>
  <option value="USA">USA</option>
  <option value="EG">EG</option>    
</select>

<select id="s_city">
</select>

<input type="text" id="t_city" style="display:none;">

Script

function check(s)
{
    document.getElementById('t_city').value ='';
    document.getElementById('s_city').innerHTML='';


   var c= s.options[s.selectedIndex].value;
   //Here You Can Start Loading your states with each country
   if(c !="USA")
   {
    document.getElementById('t_city').style.display='block';
    document.getElementById('s_city').style.display='none';
   }
  else
   {
    document.getElementById('t_city').style.display='none';
    document.getElementById('s_city').style.display='block';
   }
}

I Wish This example helped out

I would have a dropdownlist of states and a textbox for other countries.

HTML

<select id="cboCountry">
    <!-- <option value="USA">USA</option> -->
    <!-- etc -->
</select>
<select id="cboState">
    <!-- <option value="Alabama">Alabama</option> -->
    <!-- etc -->
</select>
<input type="text" id="txtState" style="display:none;" />

Javascript

$('#cboCountry').change(
    if($('#cboCountry').value() != 'USA'){
        $('#txtState').show();
        $('#cboState').hide();
    }
    else
    {
        $('#txtState').hide();
        $('#cboState').show();
    }
);

The idea here is that you will need a drop-down for the state and also a text box. If you prefer to display the drop down first then don't display the text box, or inter change.

Though my solution is pretty similar to Marvan, just take a look a live example here

• http://jsfiddle

for other reference. If your going to send this along with form you, I guess the name must be same.

Using the DOM/Inner HTML Method you can achieve that.

innerHTML method without JQuery

<select id='country_select'>
<div id='container'>
<input ...>
</div>

if (document.getElementById ("country_select").value != "USA")
{
document.getElementById("container").innerHTML = "<input ...>";
}
else
document.getElementById("container").innerHTML = "<select ...>";