如何在Razor页面下拉框内添加独立输入框以新增未预设选项

你需要启用Select2的标签创建（tagging）功能，就能让用户输入下拉框中没有的城市并作为选项提交。下面是修正后的完整代码：

Razor页面HTML部分 #

<div class="row mb-3">
    <label asp-for="user.Address" class="control-label"></label>

    <select id="ddlAddress" asp-for="user.Address" class="form-control">
        <option selected disabled>Select Address</option>              
        <option>Casario</option>
        <option>Casabella</option>
        <option>Lodha heaven</option>              
    </select>
    <span asp-validation-for="user.Address" class="text-danger"></span>            
</div>

脚本部分（@section scripts内） #

@{
    <partial name="_ValidationScriptsPartial"></partial>
}

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 移除无用的ddlDiseases调用（如果不需要的话）
        // $("#ddlDiseases").select2();
       
        $("#ddlAddress").select2({
            // 启用标签创建功能
            tags: true,
            // 自定义新增选项的显示文本
            createTag: function(params) {
                return {
                    id: params.term,
                    text: `新增：${params.term}`
                };
            },
            // 可选：设置分隔符，支持批量输入多个城市（用逗号或空格分隔）
            tokenSeparators: [',', ' ']
        });
    });
</script>

关键说明 #

1. 启用标签功能：通过tags: true开启自定义输入，用户输入的内容会自动成为新选项。
2. 自定义新增选项：createTag函数可以修改新增选项的显示样式，让用户清楚这是自己新增的内容。
3. 模型绑定兼容：Select2会自动将用户输入的自定义值设置为select控件的value，Razor的asp-for="user.Address"能正常获取到该值，无需额外处理。
4. 清理冗余代码：原代码中attributesSelect2()是不存在的方法，替换为正确的select2()配置；#ddlDiseases的调用如果没有对应控件可以直接删除。

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