Change select to input on selection of country?

Question

Hello,

I have a country selection field that allows for US and Canada and Europe selections, most of our users will be from US/CA so we defaultly show provinces, however when a user selects Europe we want it to change from a select to an input box. We have

jQuery('select.country_d').change(function(){
    if($('select.country_d').val() == "Europe")
    $('.state_d').replaceWith('<input type="text" name="state_d" id="state_d">');
});

jQuery('select.country_o').change(function(){
    if($('select.country_o').val() == "Europe")
    $('.state_o').replaceWith('<input type="text" name="state_o" id="state_o">');
});

But it doesn't seem to be working. The html part is all correct and I checked the names.

Answer 1

Put it inside a $(function()) so your .change() functions are bound on page load:

$(function()
{
    $('select.country_d').change(function()
    {
        if ($('select.country_d').val() == 'Europe')
        $('.state_d').replaceWith('<input type="text" name="state_d" id="state_d">');
    });

    $('select.country_o').change(function(){
        if($('select.country_o').val() == 'Europe')
        $('.state_o').replaceWith('<input type="text" name="state_o" id="state_o">');
    });
}
);

If that doesn't work then you should post your HTML. Are you sure the value attribute of your <select> tag is Europe with a capital E, for example?

Answer 2

I see that you are replacing them with input elements that have ID defined.. but your jQuery selection is targeting classes .state_d. Should it be #state_d ?