33< head >
44 < meta charset ="UTF-8 ">
55< meta name ="viewport " content ="width=device-width ">
6- < meta name ="theme-color " content ="#222 "> < meta name ="generator " content ="Hexo 7.2 .0 ">
6+ < meta name ="theme-color " content ="#222 "> < meta name ="generator " content ="Hexo 7.3 .0 ">
77
88 < link rel ="apple-touch-icon " sizes ="180x180 " href ="/images/apple-touch-icon-next.png ">
99 < link rel ="icon " type ="image/png " sizes ="32x32 " href ="/images/favicon-32x32-next.png ">
159159 < nav class ="site-state ">
160160 < div class ="site-state-item site-state-posts ">
161161 < a href ="/archives/ ">
162- < span class ="site-state-item-count "> 9 </ span >
162+ < span class ="site-state-item-count "> 10 </ span >
163163 < span class ="site-state-item-name "> 日志</ span >
164164 </ a >
165165 </ div >
@@ -308,10 +308,18 @@ <h2 id="先看成果："><a href="#先看成果：" class="headerlink" title="
308308< span id ="more "> </ span >
309309< h2 id ="思路 "> < a href ="#思路 " class ="headerlink " title ="思路 "> </ a > 思路</ h2 > < p > 监控两个事件( select, unselect)，覆写显示结果 ( templateResult )。</ p >
310310< ol >
311- < li > 选中某个元素，就会创建一个同样内容的 option。< figure class ="highlight javascript "> < table > < tr > < td class ="gutter "> < pre > < span class ="line "> 1</ span > < br > < span class ="line "> 2</ span > < br > < span class ="line "> 3</ span > < br > </ pre > </ td > < td class ="code "> < pre > < span class ="line "> $eventSelect.< span class ="title function_ "> on</ span > (< span class ="string "> "select2:select"</ span > , < span class ="keyword "> function</ span > (< span class ="params "> e</ span > ) { </ span > < br > < span class ="line "> $eventSelect.< span class ="title function_ "> append</ span > (< span class ="string "> '<option value="'</ span > +e.< span class ="property "> params</ span > .< span class ="property "> data</ span > .< span class ="property "> text</ span > +< span class ="string "> '">'</ span > +e.< span class ="property "> params</ span > .< span class ="property "> data</ span > .< span class ="property "> text</ span > + < span class ="string "> '</option>'</ span > );</ span > < br > < span class ="line "> });</ span > < br > </ pre > </ td > </ tr > </ table > </ figure > </ li >
312- < li > 在 templateResult 显示具体的元素时，检查 < code > obj.element.selected</ code > , 如果为 true, 就直接不显示。< figure class ="highlight javascript "> < table > < tr > < td class ="gutter "> < pre > < span class ="line "> 1</ span > < br > < span class ="line "> 2</ span > < br > < span class ="line "> 3</ span > < br > < span class ="line "> 4</ span > < br > < span class ="line "> 5</ span > < br > < span class ="line "> 6</ span > < br > < span class ="line "> 7</ span > < br > < span class ="line "> 8</ span > < br > < span class ="line "> 9</ span > < br > < span class ="line "> 10</ span > < br > </ pre > </ td > < td class ="code "> < pre > < span class ="line "> < span class ="keyword "> function</ span > < span class ="title function_ "> formatResultData</ span > (data) {</ span > < br > < span class ="line "> < span class ="keyword "> if</ span > (!data.< span class ="property "> id</ span > ) < span class ="keyword "> return</ span > data.< span class ="property "> text</ span > ;</ span > < br > < span class ="line "> < span class ="keyword "> if</ span > (data.< span class ="property "> element</ span > .< span class ="property "> selected</ span > ) < span class ="keyword "> return</ span > </ span > < br > < span class ="line "> < span class ="keyword "> return</ span > data.< span class ="property "> text</ span > ;</ span > < br > < span class ="line "> };</ span > < br > < span class ="line "> </ span > < br > < span class ="line "> $eventSelect.< span class ="title function_ "> select2</ span > ({</ span > < br > < span class ="line "> < span class ="attr "> templateResult</ span > : formatResultData,</ span > < br > < span class ="line "> < span class ="attr "> tags</ span > : < span class ="literal "> true</ span > }</ span > < br > < span class ="line "> );</ span > < br > </ pre > </ td > </ tr > </ table > </ figure > </ li >
313- < li > 取消选中某个元素时，就直接删除该 option。< figure class ="highlight javascript "> < table > < tr > < td class ="gutter "> < pre > < span class ="line "> 1</ span > < br > < span class ="line "> 2</ span > < br > < span class ="line "> 3</ span > < br > </ pre > </ td > < td class ="code "> < pre > < span class ="line "> $eventSelect.< span class ="title function_ "> on</ span > (< span class ="string "> "select2:unselect"</ span > , < span class ="keyword "> function</ span > (< span class ="params "> e</ span > ) { </ span > < br > < span class ="line "> e.< span class ="property "> params</ span > .< span class ="property "> data</ span > .< span class ="property "> element</ span > .< span class ="title function_ "> remove</ span > ();</ span > < br > < span class ="line "> });</ span > < br > </ pre > </ td > </ tr > </ table > </ figure > </ li >
311+ < li > 选中某个元素，就会创建一个同样内容的 option。</ li >
314312</ ol >
313+ < figure class ="highlight javascript "> < table > < tr > < td class ="gutter "> < pre > < span class ="line "> 1</ span > < br > < span class ="line "> 2</ span > < br > < span class ="line "> 3</ span > < br > </ pre > </ td > < td class ="code "> < pre > < span class ="line "> $eventSelect.< span class ="title function_ "> on</ span > (< span class ="string "> "select2:select"</ span > , < span class ="keyword "> function</ span > (< span class ="params "> e</ span > ) { </ span > < br > < span class ="line "> $eventSelect.< span class ="title function_ "> append</ span > (< span class ="string "> '<option value="'</ span > +e.< span class ="property "> params</ span > .< span class ="property "> data</ span > .< span class ="property "> text</ span > +< span class ="string "> '">'</ span > +e.< span class ="property "> params</ span > .< span class ="property "> data</ span > .< span class ="property "> text</ span > + < span class ="string "> '</option>'</ span > );</ span > < br > < span class ="line "> });</ span > < br > </ pre > </ td > </ tr > </ table > </ figure >
314+ < ol start ="2 ">
315+ < li > 在 templateResult 显示具体的元素时，检查 < code > obj.element.selected</ code > , 如果为 true, 就直接不显示。</ li >
316+ </ ol >
317+ < figure class ="highlight javascript "> < table > < tr > < td class ="gutter "> < pre > < span class ="line "> 1</ span > < br > < span class ="line "> 2</ span > < br > < span class ="line "> 3</ span > < br > < span class ="line "> 4</ span > < br > < span class ="line "> 5</ span > < br > < span class ="line "> 6</ span > < br > < span class ="line "> 7</ span > < br > < span class ="line "> 8</ span > < br > < span class ="line "> 9</ span > < br > < span class ="line "> 10</ span > < br > </ pre > </ td > < td class ="code "> < pre > < span class ="line "> < span class ="keyword "> function</ span > < span class ="title function_ "> formatResultData</ span > (data) {</ span > < br > < span class ="line "> < span class ="keyword "> if</ span > (!data.< span class ="property "> id</ span > ) < span class ="keyword "> return</ span > data.< span class ="property "> text</ span > ;</ span > < br > < span class ="line "> < span class ="keyword "> if</ span > (data.< span class ="property "> element</ span > .< span class ="property "> selected</ span > ) < span class ="keyword "> return</ span > </ span > < br > < span class ="line "> < span class ="keyword "> return</ span > data.< span class ="property "> text</ span > ;</ span > < br > < span class ="line "> };</ span > < br > < span class ="line "> </ span > < br > < span class ="line "> $eventSelect.< span class ="title function_ "> select2</ span > ({</ span > < br > < span class ="line "> < span class ="attr "> templateResult</ span > : formatResultData,</ span > < br > < span class ="line "> < span class ="attr "> tags</ span > : < span class ="literal "> true</ span > }</ span > < br > < span class ="line "> );</ span > < br > </ pre > </ td > </ tr > </ table > </ figure >
318+ < ol start ="3 ">
319+ < li > 取消选中某个元素时，就直接删除该 option。</ li >
320+ </ ol >
321+ < figure class ="highlight javascript "> < table > < tr > < td class ="gutter "> < pre > < span class ="line "> 1</ span > < br > < span class ="line "> 2</ span > < br > < span class ="line "> 3</ span > < br > </ pre > </ td > < td class ="code "> < pre > < span class ="line "> $eventSelect.< span class ="title function_ "> on</ span > (< span class ="string "> "select2:unselect"</ span > , < span class ="keyword "> function</ span > (< span class ="params "> e</ span > ) { </ span > < br > < span class ="line "> e.< span class ="property "> params</ span > .< span class ="property "> data</ span > .< span class ="property "> element</ span > .< span class ="title function_ "> remove</ span > ();</ span > < br > < span class ="line "> });</ span > < br > </ pre > </ td > </ tr > </ table > </ figure >
322+
315323< h2 id ="最终的代码 "> < a href ="#最终的代码 " class ="headerlink " title ="最终的代码 "> </ a > 最终的代码</ h2 > < p > < a target ="_blank " rel ="noopener " href ="https://jsfiddle.net/nsdont/pu6yhbxy/4/ "> jsfiddle 代码</ a > </ p >
316324< h2 id ="相关链接 "> < a href ="#相关链接 " class ="headerlink " title ="相关链接 "> </ a > 相关链接</ h2 > < p > < a target ="_blank " rel ="noopener " href ="https://select2.github.io/examples.html#events "> 官方 event 事件文档</ a > < br > < a target ="_blank " rel ="noopener " href ="https://github.com/select2/select2/issues/3341 "> how to allow duplicate selections · Issue #3341 · select2/select2</ a > </ p >
317325
@@ -375,7 +383,7 @@ <h2 id="相关链接"><a href="#相关链接" class="headerlink" title="相关
375383
376384 < div class ="copyright ">
377385 ©
378- < span itemprop ="copyrightYear "> 2024 </ span >
386+ < span itemprop ="copyrightYear "> 2025 </ span >
379387 < span class ="with-love ">
380388 < i class ="fa fa-heart "> </ i >
381389 </ span >
@@ -386,13 +394,13 @@ <h2 id="相关链接"><a href="#相关链接" class="headerlink" title="相关
386394 < span class ="post-meta-item-icon ">
387395 < i class ="fa fa-chart-line "> </ i >
388396 </ span >
389- < span title ="站点总字数 "> 12k </ span >
397+ < span title ="站点总字数 "> 13k </ span >
390398 </ span >
391399 < span class ="post-meta-item ">
392400 < span class ="post-meta-item-icon ">
393401 < i class ="fa fa-coffee "> </ i >
394402 </ span >
395- < span title ="站点阅读时长 "> 11 分钟</ span >
403+ < span title ="站点阅读时长 "> 12 分钟</ span >
396404 </ span >
397405</ div >
398406< div class ="busuanzi-count ">
0 commit comments