如何解决在select2中选择未知项目时显示项目请求表
我想使用select2来显示公司搜索。如果用户要查找的公司不在当前数据集中，则需要显示公司请求表以添加数据。
html
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="company">
<option value="1">(FB) Facebook</option>
<option value="2">(AAPL) Apple</option>
<option value="3">(NFLX) Netflix</option>
<option value="4">(GOOG) Alphabet</option>
</select>
<form style="margin: 100px 0 0 0; display: none">
<h2>
Company not found
</h2>
<button>
Add Company?
</button>
</form>
</body>
javascript
/**
* Requrirements:
* 1) indicate in dropdown that the user will be adding the company. Maybe by displaying "Add: GOOG"
* 2) unhide company request form when a new company is selected.
*/
$(document).ready(function() {
let elm = $('.js-example-basic-single');
elm.select2({
placeholder: "Company",tags: true,createTag: function(params) {
console.log('createTag',params);
return {
id: params.term,text: params.term.toUpperCase()
}
},insertTag: function(data,tag) {
tag.isTag = true;
data.push(tag);
},}).on("change:select",function(e) {
console.log('select');
var data = e.params.data;
var requestForm = document.querySelector('form');
if (data.isTag) {
console.log('local tag selected',data);
requestForm.style.display = 'block';
} else {
requestForm.style.display = 'none';
}
});
});
jsfiddle在https://jsfiddle.net/morenoh149/mf6Lxyc0/21/给予的任何帮助
解决方法
您正在使用change:select，但不是select2 event。最接近的事件是change.select2，但这不是您想要的。您想要的事件是select2:select，它在选择结果时发生。
鉴于您现有的代码，您已经将isTag设置为true，因此其余代码可以按预期工作：
}).on("select2:select",function(e) {
console.log('select');
var data = e.params.data;
var requestForm = document.querySelector('form');
if (data.isTag) {
console.log('local tag selected',data);
requestForm.style.display = 'block';
} else {
requestForm.style.display = 'none';
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。