select2切换事件如何生效

最新推荐文章于 2024-06-24 11:26:29 发布

采精小蝴蝶

最新推荐文章于 2024-06-24 11:26:29 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jrrfgj/article/details/84192463

本文详细解析了在使用Select2插件时，如何正确地为可搜索下拉框绑定切换事件。通过对比change事件与select2:select事件的使用，解决了下拉框值无法正确回填的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

1、问题背景

利用select2生成可搜索下拉框，并且绑定切换事件；但是直接绑定change事件，发现不起作用

2、问题原因

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>select2切换事件</title><link rel="stylesheet" href="../css/select2.css" /> <script src="../js/jquery-3.2.1.js"></script><script src="../js/select2.js"></script><script> $(function(){  $("#selData").select2();    $("#selData").off().on("change",function(){   var data = $(this).val();   alert(data);  }); });</script></head><body> <div>  <select id="selData" class="js-example-basic-single" style="width:300px;">   <option value=""></option>   <option value="1">李四</option>   <option value="2">王武</option>   <option value="3">华章</option>   <option value="4">司徒</option>   <option value="5">朝华</option>   <option value="6">沈磊</option>  </select> </div></body></html>

上述代码，下拉搜索框切换事件直接使用change，发现选中的值不能回填到框中

3、解决办法

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>select2切换事件</title><link rel="stylesheet" href="../css/select2.css" /> <script src="../js/jquery-3.2.1.js"></script><script src="../js/select2.js"></script><script> $(function(){  $("#selData").select2();    $("#selData").on("select2:select",function(){   var data = $(this).val();   alert(data);  }); });</script></head><body> <div>  <select id="selData" class="js-example-basic-single" style="width:300px;">   <option value=""></option>   <option value="1">李四</option>   <option value="2">王武</option>   <option value="3">华章</option>   <option value="4">司徒</option>   <option value="5">朝华</option>   <option value="6">沈磊</option>  </select> </div></body></html>

将change换成select2:select，这样下拉搜索框可以回填值了

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow