选择「其他」选项时将Dropdown切换为文本框的实现需求

1. 后端模型调整 #

先确保你的选项集合somechoiceClass中包含「其他」选项，示例如下：

# 示例choices定义（根据实际需求调整选项）
somechoiceClass = [
    ('task1', '任务1'),
    ('task2', '任务2'),
    ('other', '其他'),  # 必须添加该选项触发切换逻辑
]

class MyModel(models.Model):
    task_name = models.CharField(blank=True, choices=somechoiceClass, default='')

注：Django的CharField搭配choices仅限制表单显示选项，实际仍支持存储任意字符串，无需修改字段类型。

2. 前端Vue逻辑修改 #

核心是通过判断选中值是否为「其他」，动态切换下拉框与文本框的显示状态：

模板部分修改 #

<div class="col-md-4">
    <div class="form-group label-static" :class="{'has-error': errors.task_name && errors.task_name.length > 0}">
        <label class="typo__label control-label">Task Name&nbsp;<span class="req">*</span></label>
        <!-- 下拉框：选中值不是「其他」时显示 -->
        <multiselect
            v-if="form.task_name !== 'other'"
            v-model="form.task_name"
            :options="taskNameChoices"
            :multiple="false"
            :close-on-select="true"
            :clear-on-select="true"
            :preserve-search="true"
            placeholder="Select"
            label="text"
            track-by="id"
            :hide-selected="false"
            :show-labels="false">
        </multiselect>
        <!-- 文本框：选中「其他」时显示 -->
        <input
            v-else
            v-model="form.task_name_custom"
            type="text"
            class="form-control"
            placeholder="请输入自定义任务名称"
        />
        <span class="help-block" v-show="errors.task_name" v-text="errors.task_name && errors.task_name[0]" v-cloak></span>
    </div>
</div>

脚本部分调整 #

新增自定义输入绑定变量，并在提交前处理值的替换逻辑：

export default {
    data() {
        return {
            form: {
                task_name: '',
                task_name_custom: ''  // 绑定自定义输入的变量
            },
            taskNameChoices: instanceData.case && instanceData.case.task_names || [],
            errors: { task_name: [] }
        }
    },
    watch: {
        // 切换选项时清空自定义输入
        'form.task_name'(newVal) {
            if (newVal !== 'other') {
                this.form.task_name_custom = '';
            }
        }
    },
    methods: {
        submitForm() {
            // 重置错误提示
            this.errors.task_name = [];
            
            // 处理「其他」选项的自定义值
            if (this.form.task_name === 'other') {
                const customVal = this.form.task_name_custom.trim();
                if (!customVal) {
                    this.errors.task_name = ['请输入自定义任务名称'];
                    return;
                }
                this.form.task_name = customVal;
            } else if (!this.form.task_name) {
                // 验证下拉选项是否选中
                this.errors.task_name = ['请选择或输入任务名称'];
                return;
            }
            
            // 后续提交逻辑...
        }
    },
    mounted() {
        this.taskNameChoices = selectedOption.task_names;
        
        // 编辑页面回显处理：如果是自定义值，默认切换到文本框
        const isCustom = !this.taskNameChoices.some(item => item.id === this.form.task_name);
        if (isCustom) {
            this.form.task_name_custom = this.form.task_name;
            this.form.task_name = 'other';
        }
    }
}

3. 额外注意事项 #

• 选项同步：确保taskNameChoices数组中包含「其他」选项，否则无法触发切换逻辑。
• 验证逻辑：无论是下拉选择还是自定义输入，都要做必填校验，避免提交空值。
• 回显适配：编辑页面需根据已存值自动切换显示状态，确保用户体验一致。

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