如何在选择美国时将州下拉框转为文本输入框？

我在表单中设置了国家（country）和州（state）下拉框，希望当选择的国家为美国（US）时，州下拉框能自动转换为文本输入框。目前已编写了部分jQuery代码如下：

$(function(){
$('#country').on('change',function(){
    var selected=$(this).find("option:selected").val();
    if(selected=='US'){
     //need to write some code to change the dropdown into input text field
    }
});
})

但不知道在if代码块中应编写什么代码来实现下拉框转文本输入框的功能，请问如何实现这种动态选择后的转换效果？

解决方案 #

核心思路是保存原下拉框的状态与值，用文本输入框替换下拉框；同时处理切换回其他国家时的恢复逻辑，避免用户操作丢失数据。

完整实现代码 #

$(function(){
    // 提前克隆原state下拉框作为备份，避免重复创建
    var $stateSelectBackup = $('#state').clone();
    var currentStateValue = '';

    $('#country').on('change', function(){
        var selectedCountry = $(this).val();
        var $stateElement = $('#state');

        if (selectedCountry === 'US') {
            // 保存当前下拉框的选中值，用于填充到文本输入框
            currentStateValue = $stateElement.val();
            // 替换下拉框为文本输入框
            $stateElement.replaceWith(`<input type="text" id="state" value="${currentStateValue}" placeholder="请输入州/地区">`);
        } else {
            // 非US时，若当前是文本输入框则恢复为原下拉框
            if ($stateElement.is('input')) {
                // 保存输入框的值，恢复下拉框时选中对应选项
                currentStateValue = $stateElement.val();
                var $restoredSelect = $stateSelectBackup.clone();
                $restoredSelect.val(currentStateValue);
                $stateElement.replaceWith($restoredSelect);
            }
        }
    });
})

关键细节说明 #

• 备份原控件：提前克隆下拉框，保证切换回原控件时保留所有初始选项
• 值同步处理：每次切换前保存当前控件的值，确保用户的输入/选择不会丢失
• 简化选中值获取：直接使用$(this).val()获取下拉框选中值，比原写法更简洁高效
• 状态判断：通过is('input')判断当前控件类型，避免重复执行替换逻辑

内容的提问来源于stack exchange，提问作者AlwaysALearner