jQuery Selectbox to Textbox

Question

Before changing country

After changing country

As you saw on the pictures i want to replace selectbox with textbox for city and town depends on changing country. (I need selectbox only in my country. For other countries i need textbox.)

If the client change country i'm replacing selectbox to textbox. It is ok. But if the client want to back old country selection I need to reload city and town as selectbox. But it is not working

What should i do ?

Here is my jquery file.

<script type="text/javascript">
    $(document).ready(function(){
        var city = $('#city').html();
        var town = $('#town').html();

        $('#country').change(function(city, town){
            var country = $(this).val();
            if(country != 'Türkiye')
            {
                $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
                $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
            }
            else
            {
                $('#city').replaceWith(city);
                $('#town').replaceWith(town);
            }
        });
    });
</script>

UPDATE: I'm almost done. (I used @Rhumborl 's method.)

But there is a problem. Town depends on city selection. Normally when city changes i'm loading new towns. But in this issue. It is not working.

In this event code fails.

1. I changed country.
2. I turned back Turkey.
3. I changed city to Ankara, new towns are loading from Ankara.
4. When i changed any other country and turn back to Turkey. I can see city as Ankara. But towns are not Ankara's. Towns are from origin City Nevşehir.

Here is screenshot

This is conflict.

Answer 1

You have 2 issues

1. html() only gives you the innerHTML of an element, that is any content inside it, not the element itself. In this case, you will only get the <option>s.

2. Your change function is taking in 2 parameters called city and town which are overriding the references to the variables you create at the top. Because this function will be given the jQuery event object, you are replacing the textboxes with the wrong things.

To fix problem 1, you can simply remove the .html() part, and just store city and town as jQuery objects containing the original elements.

To fix problem 2, just remove the city and town parameters from your function.

So your code can look like this:

$(document).ready(function(){
    var city = $('#city');
    var town = $('#town');

    $('#country').change(function(){
        var country = $(this).val();
        if(country != 'Türkiye')
        {
            $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
            $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
        }
        else
        {
            $('#city').replaceWith(city);
            $('#town').replaceWith(town);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="country">
  <option value="Türkiye">Turkey</option>
  <option value="UK">United Kingdom</option>
  <option value="USA">USA</option>
</select>

<select id="city">
  <option value="Izmir">Izmir</option>
  <option value="Ankhara">Ankha`enter code here`ra</option>
</select>

<select id="town">
  <option value="Merkez">Merkez</option>
</select>

UPDATE

If you want to keep event handlers etc attached to town and city selects, you cannot use replaceWith() as this removes all event handlers. As the documentation says:

The .replaceWith() method removes all data and event handlers associated with the removed nodes.

Instead you need a combination of detach() to remove the elements but preserve event handlers and after() to add the inputs/selects to the DOM after the current active elements:

$(document).ready(function(){
    var city = $('#city');
    var town = $('#town');
  
    town.change(function() {
      $('#townResult').text($(this).val());
    });
  
    city.change(function() {
      $('#cityResult').text($(this).val());
    });

    $('#country').change(function(){
        var country = $(this).val();
        if(country != 'Türkiye')
        {
            // add the textboxes after the dropdowns, then detach the dropdowns
            $('#city').after('<input class="form-control" type="text" name="city" id="city">').detach();
            $('#town').after('<input class="form-control" type="text" name="town" id="town">').detach();
        }
        else
        {
            // add the dropdowns after the textboxes, then remove the textboxes
            $('#city').after(city).remove();
            $('#town').after(town).remove();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="country">
  <option value="Türkiye">Turkey</option>
  <option value="UK">United Kingdom</option>
  <option value="USA">USA</option>
</select>

<select id="city">
  <option value="Izmir">Izmir</option>
  <option value="Ankhara">Ankhara</option>
</select>

<select id="town">
  <option value="Merkez">Merkez</option>
  <option value="A Town">A Town</option>
</select>

<div id="cityResult"></div>
<div id="townResult"></div>

Answer 2

try this:-

  $(document).ready(function(){
        var city = $('#city');
        var town = $('#town');

        $('#country').change(function(){

            var country = $(this).val();
            if(country != 'Türkiye')
            {
                $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">');
                $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">');
            }
            else
            {
                $('#city').replaceWith(city);
                $('#town').replaceWith(town);
            }
        });
    });

remove .html() as that gets the content inside the element and remove the city and town parameters in the function.

EDIT

If you have event handlers attached to city and town selects, wire your events like so:-

$(document).on('change', 'select#city', function(){

$(document).on('change', 'select#town', function(){

that way the events on the selects you were originally losing will still work as you need. select#city will only target the select and not the text field.

Fiddle

EDIT FOR CITY CHANGE

To fix this, just reset the city and town variables on city change.

ie:-

$(document).on('change', '#city', function(){

     //YOUR CODE FOR SETTING THE TOWNS HERE

     // RE-SET CITY AND TOWN
     city = $('#city');
     town = $('#town');
 });

See this Fiddle

Answer 3

You can add the element that you want to replace inside a container ( a div or a span) then replace the whole container content with the needed element depending on your requirements

Answer 4

You can use html templates :

<script type="text/html" id="textbox-template"><!-- Your textbox here --></script>

<script type="text/html" id="selectbox-template"><!-- Your selectbox here --></script>

With jQuery, load the content of the corresponding template depending of the selected country.

If you wan't to save and re-display selected values, you can save the current textbox or selectbox html in the corresponding template.