Change select to input on selection of country?

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 chan开发者_如何学Goge 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.

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

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

    $('select.country_o').change(function(){
        if($(this).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?

Below is my version of doing this. There are some caveats mentioned in the comments. Feel free to adjust to remove the caveats or adjust for your application's assumptions. Assumes jQuery and written in coffeescript but would be easy enough to change to plain o'JavaScript.

$ = jQuery

# Will monitor select fields. If an "Other" option is selected will turn
# the field into a text field allowing them to enter their custom value.
#
# I'm not leaving a way to change back. Since ad-hoc values are allowed I
# figure if they want a predefined value they can refresh or just type it in.
#
# I try to copy all the relevant attriubtes so that the new text field
# really replaces the original. Would be nice if DOM provided a way to
# copy all attributes that are available on both elements. Add any missing as
# I really just copied the ones I am using.
#
# Currently it will change any select with an "Other" option. This is probably
# the most likely thing to change (maybe require a data- attribute to indicate
# the other option is avaialble). But for now I like the simplicity of just
# adding the "Other" value to the select options.
#
# Any event handlers attached to the old element are not transfered.
$(document).on 'change', 'select', ->
  $_ = $ @

  return unless $_.val() == 'Other'
  text = $ '<input type="text" placeholder="Other">'

  # Copy attributes
  for attr in ['id', 'className', 'name', 'required']
    text.attr attr, $_.attr(attr)

  # Replace select with text area
  $_.replaceWith text

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 ?

You can to use this function:

function transformSelectIntoInput(elementSelector){
    var $el = $(elementSelector);

    $el.replaceWith($('<input />').attr({ 
        type: 'text',
        id: $el.attr('id'),
        name: $el.attr('name'),
        class: $el.attr('class'),
        value: $el.val()
        }));
}