这个需求可以用 Select2 的 tags 模式来实现：
如果银行在下拉列表里，就选择已有的；
如果没有，就可以直接输入新值并回车。
<!– 引入 select2 –>
<link href=”https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css” rel=”stylesheet” />
<script src=”https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js”></script>
<select id=”bank” style=”width:300px”>
<option value=”中国工商银行”>中国工商银行</option>
<option value=”农业银行”>农业银行</option>
<option value=”建设银行”>建设银行</option>
<option value=”中国银行”>中国银行</option>
<option value=”中国邮政”>中国邮政</option>
<option value=”招商银行”>招商银行</option>
<option value=”浦发银行”>浦发银行</option>
<option value=”中信银行”>中信银行</option>
<option value=”光大银行”>光大银行</option>
<option value=”民生银行”>民生银行</option>
<option value=”广发银行”>广发银行</option>
<option value=”华夏银行”>华夏银行</option>
<option value=”平安银行”>平安银行</option>
<option value=”兴业银行”>兴业银行</option>
<option value=”北京银行”>北京银行</option>
<option value=”上海银行”>上海银行</option>
</select>
<script>
$(document).ready(function() {
$(“#bank”).select2({
placeholder: “请选择或输入银行”,
tags: true, // 开启自定义输入
allowClear: true, // 允许清空
createTag: function (params) {
// 输入不在列表里时，允许新建
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
// 高亮提示“新建”
var $result = $(“<span></span>”);
$result.text(data.text);
if (data.newOption) {
$result.append(” <em>(新建)</em>”);
}
return $result;
}
});
});
</script>