首页上一个html页面用select2 重写一下

上一个html页面用select2 重写一下

时间: 2024-02-17 17:03:52 浏览: 23

好的，下面是使用 Select2 重写一个简单的 HTML 页面： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Select2 Demo</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> </head> <body> <h1>Select2 Demo</h1> <p>请选择您喜欢的水果：</p> <select id="fruit-select" multiple="multiple"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="cherry">樱桃</option> <option value="orange">橙子</option> <option value="pear">梨子</option> </select> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> <script> $(document).ready(function() { $('#fruit-select').select2(); }); </script> </body> </html> ``` 在这个示例中，我们使用 Select2 将一个原生的多选 select 元素转换成一个带搜索框的下拉框。我们引入了 Select2 的 CSS 和 JS 文件，然后在 JavaScript 中调用了 `select2()` 函数来将 select 元素转换成 Select2。