首页
学习
活动
专区
圈层
工具
发布

select2 使用教程(简)「建议收藏」

用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。...({ data: data, placeholder:'请选择', allowClear:true }) 四.加载远程数据 $("#c01-select").select2({ ajax...我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等方式,界面效果如下所示。...2)编辑界面下的多项选择下拉列表 但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。...//绑定Ajax的内容 $.getJSON(url, function (data) { control.empty();//清空下拉框 $.each(data,

29.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

    我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框)、复选的下拉列表、树形下拉列表等方式,界面效果如下所示。...但我们选择其中的内容的时候,系统自动显示出没有选择的列表数据,非常直观友好,如下所示。 ? 3)树形列表的下拉列表 有时候,我们的一些数据可能有层次关系的,如所属机构、上层列表等等。 ? ?...select> 2)异步数据绑定操作 一般情况下,我们的select控件的数据,是从数据库里面动态加载的,因此一般是通过Ajax方式获取数据并进行绑定即可。...cityName="+ cityName); }); } 而其中MVC控制器返回的数据,我们是返回一个JSON数据列表给前端页面的,他们的数据格式如下所示。...//绑定Ajax的内容 $.getJSON(url, function (data) { control.empty();//清空下拉框 $.each(data,

    5.5K90

    select2 api参数的文档

    是否允许选择多个值 openOnEnter 打开下拉如果设置为true,当用户按下回车键,Select2关闭。...createSearchChoicePosition 函数/字符串 定义的位置插入元素 initSelection 函数 调用Select2创建允许用户初始化选择的值 select2附加到元素 tokenizer...ajax 对象 选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级的特性,比如节流和无序的反应。...dropdownCssClass 函数/字符串 Css类将被添加到select2下拉的容器。 dropdownAutoWidth 布尔 当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。...close"); }); // 关闭下拉框 $("#e1").select2({placeholder: "Select a state"}); // 下拉框 提示 $("#e1").click(function

    7.2K50

    Springmvc响应Ajax请求(@ResponseBody)

    要想使用@ResponseBody这个注解来接收Ajax发送过来的请求,必须加上注解驱动mvc:annotation-driven>mvc:annotation-driven> ajax的注解扫描 --> mvc:annotation-driven>mvc:annotation-driven> 编写前端表单 其实并不是使用表单提交的,可以不使用表单...即可,就会自动的导入其他的两个 ​ 实现 加载页面完成之后,发送一个异步请求,请求所有的省份,在省的下拉菜单中显示出来 当用户选择了某个省之后,那么发送一个异步请求,获取当前省的所有市的信息,并且显示在市的下拉菜单中 在省的下拉菜单中需要使用...调用service的方法查询,service调用dao的方法查询 * 2. dao中的查询: 根据code查询出对应的城市即可,当然是联表查询 *

    10.4K81

    ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景

    在ASP.NET MVC框架将来的预览版中,我们将提供几十个内置的HTML和AJAX辅助方法。...在第一个预览版中,只有"ActionLink"方法是内置于System.Web.Extensions(目前实现核心ASP.NET MVC框架的程序集)中的。...注意Html.Select辅助方法有个重载版本,允许你指定下拉框中的选定值是什么。在下面的代码片断中,我表示我要Category下拉框根据编辑产品目前的CategoryID值自动选择某一项: ?...跟前面的"Create" action方法一样,我们将利用"UpdateFrom"扩展方法来从请求中自动填充我们的产品对象。...我将讨论你如何在MVC框架中使用ASP.NET AJAX进行启用AJAX的编辑。我还将对如何单元测试控制器和向控制器添加依赖注入做深入的探讨。 希望本文对你有所帮助, Scott

    7K70

    yii2组件之下拉框带搜索功能的示例代码(yii-select2)

    更好办啦,以上面的为例,你只需要指定$model->title = ['title1', 'title2'];即可 基本上就是这么回事,我们也就很简单的实现了下拉选择并可搜索的功能。...echo $form->field($model, 'title')->widget(Select2::classname(), [ 'data' => $data, 'options' => [...举一个例子,我们现在要查询某一个书名,但是我们的书的数据量大概有100W,很简单,这需要我们根据你的搜索结果异步获取下拉框里面的数据。未完待续,晚点做进一步说明。...'; }"), ], 'ajax' => [ 'url' => '这里是提供数据源的接口', 'dataType' => 'json', 'data' => new JsExpression('function...> 上面的代码可直接复制使用,唯独需要修改的就是ajax里对应的url地址。下面我们看看controller层代码是怎么提供数据的。

    1.6K20

    基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理

    1、数据的导入操作  一般系统模块里面,都有数据导入和导出操作,因此在界面自动生成的时候,我都倾向于给用户自动生成这些标准的查询、导入、导出等操作功能,界面效果如下所示。 ?...下面这些代码一般情况下,都是自动生成的,包括所需的全部字段,我们一般是根据需要进行字段的裁剪,以适应我们的业务和实际需要。 <!...//保存导入的数据 function SaveImport() { //赋值给对象 $("#Company_ID3").select2("...val", @Session["Company_ID"]).trigger('change'); $("#Dept_ID3").select2("val", @Session["...//xhr.responseText } }); } 其中的代码 $("#file").modal("show"); 是我们调用全局对话框

    2K70

    你的JSON & AJAX 满分学习文章,请收下

    在 mvc.xml 配置 MVC 注解解析器。 定义一个类,里面提供对应属性封装数据。...AJAX 核心只不过是要在 Javascript 中调用一个叫 XMLHttpRequest 类,这个类可以与 Web 服务器使用 HTTP 协议进行交互,程序不通过浏览器发出请求,而是用这个特殊的 JavaScript...3.2、二级联动的实现思路 页面加载完,省份下拉框从后台获取省份数据; 将后台获取的响应数据,渲染到省份下拉框中; 给省份下框绑定值改变的事件,值发生改变之后,把选择的省份 id 传给后台; 将后台获取的响应数据...,渲染到城市下拉框中。...,当省份下拉框选项改变了,就发送请求获取这个省份 对应城市数据,拿到数据再使用 DOM 显示城市下拉框中 $p.change(function () { var

    3.3K20
    领券