AJAX请求成功后如何将下拉选择框替换为文本输入框？

嘿，我来帮你搞定这个需求！要把页面上的下拉选择框（select）替换成文本输入框，核心就是移除原有的select元素，在相同位置插入新的input标签。我会根据两种常见场景给你提供代码：

场景1：用单条数据填充单个输入框 #

如果你的data返回的是单条数据，或者你只需要用第一条数据来替换下拉框，可以这样写：

success: function (data) {
    console.log(data);
    // 取返回数据中的第一条（如果是单条数据，data[0]就是它本身）
    const targetData = data[0] || data;

    // 替换city下拉框为文本输入框，填充page_title值
    $('select[name="city"]').replaceWith(`
        <input type="text" name="city" value="${targetData.page_title || ''}" placeholder="请输入城市">
    `);

    // 替换Metatags下拉框为文本输入框
    $('select[name="Metatags"]').replaceWith(`
        <input type="text" name="Metatags" value="${targetData.metatags || ''}" placeholder="请输入元标签">
    `);

    // 替换Description下拉框为文本输入框
    $('select[name="Description"]').replaceWith(`
        <input type="text" name="Description" value="${targetData.description || ''}" placeholder="请输入描述">
    `);
}

关键说明： #

• 使用replaceWith()方法直接替换原select，一步到位，比先清空再修改更高效。
• 用ES6模板字符串（``）拼接HTML，避免了引号嵌套的混乱，可读性更强。
• targetData.page_title || ''是为了防止字段为空时输入框显示undefined，默认设为空字符串更友好。
• 可以添加placeholder属性提示用户输入内容，提升体验。

场景2：为每条数据创建一个输入框 #

如果你的data是多条数据，需要为每条数据生成对应的输入框，可以这样处理：

success: function (data) {
    console.log(data);

    // 处理city输入框：先获取父容器，移除原下拉框，再循环添加输入框
    const $cityParent = $('select[name="city"]').parent();
    $('select[name="city"]').remove();
    $.each(data, function (key, value) {
        $cityParent.append(`
            <div class="input-group">
                <input type="text" name="city[]" value="${value.page_title || ''}" placeholder="城市">
            </div>
        `);
    });

    // 同理处理Metatags
    const $metaParent = $('select[name="Metatags"]').parent();
    $('select[name="Metatags"]').remove();
    $.each(data, function (key, value) {
        $metaParent.append(`
            <div class="input-group">
                <input type="text" name="Metatags[]" value="${value.metatags || ''}" placeholder="元标签">
            </div>
        `);
    });

    // 处理Description
    const $descParent = $('select[name="Description"]').parent();
    $('select[name="Description"]').remove();
    $.each(data, function (key, value) {
        $descParent.append(`
            <div class="input-group">
                <input type="text" name="Description[]" value="${value.description || ''}" placeholder="描述">
            </div>
        `);
    });
}

关键说明： #

• 先获取select的父容器，这样新的输入框会和原下拉框在同一个位置。
• 用name="city[]"这种数组形式命名，后端可以直接接收一组输入值。
• 包裹一个div.input-group方便后续样式调整，让多个输入框排版更整洁。

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