两个select2可以正常工作，但不能从ajax获取数据 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

新手编程1001问（2）

A：上一期，我们回答了JS/JQuery如何获取下拉框选中的文本和值。那么今天的问题，我们可以继续聊聊下拉框了。下拉框在前端设计中是一个很常用的列表控件。独立的下拉框要实现起来并不难。...解决这个问题的关键方法分两步：第一步：使用Ajax，页面不刷新，获取下一个下拉框的列表数据。第二步：使用JQery，将Ajax获取的列表数据更新到指定的下拉框。...案例：页面上有Select1和Select2，需求是Select2的列表数据依赖于Select1选中的值。...$(“#Select2”).empty(); //先定义默认选项 ("").val("0").text("请选择...").appendTo( //再将Ajax拿到的数据更新到...获取的数据更新到Select2 //清空Select2控件 $(“#Select2”).empty(); ("").val("").text("请选择..."

8.9K4 0

select2 使用教程（简）「建议收藏」

比如：清除功能allowClear: true 最新版本请使用标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select）二.placeholder...三.加载本地数据 select2默认的数据属性是id、text，新版本可以自定义，但还是用默认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加其他属性。...，你可以通过id来从服务器上获取（ajax），再装载进去 callback(data); } //新版，直接给select添加option $("#id").append(new Option("...好处是不进可以获取id、text还可以获取其他属性，如res[0].names 4.停用或启用：(“select”).enable(false);（老版）；(“select”).prop(“disabled...select> 2）异步数据绑定操作一般情况下，我们的select控件的数据，是从数据库里面动态加载的，因此一般是通过Ajax方式获取数据并进行绑定即可。

29.6K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

JSTree插件，本篇继续介绍在编辑页面中常用到的控件Select2，这个控件可以更加丰富传统的Select下拉列表控件，提供更多的功能和更好的用户体验。...select> 2）异步数据绑定操作一般情况下，我们的select控件的数据，是从数据库里面动态加载的，因此一般是通过Ajax方式获取数据并进行绑定即可。...其中BindDictItem就是直接绑定字典内容的操作，BindSelect则是根据URL进行数据的获取并绑定，而$("#Province").on("change", function (e) {})... " + item.Text + ""); }); }); 控制器的实现代码如下： /// /// 根据字典类型获取对应的字典数据...$("#Permission").select2("val", info.Permission.split(',')); ? ? 最后来两个整体性的界面效果，供参考。 ? ? ?

5.5K9 0

select2 api参数的文档

具体参数可以参考一下：参数类型描述 Width 字符串控制宽度样式属性的Select2容器div minimumInputLength int 最小数量的字符 maximumInputLength...ajax 对象选择内置的ajax查询功能。这个对象作为快捷方式有手动编写一个函数,执行ajax请求。内置函数支持更高级的特性,比如节流和无序的反应。...value is: "+$("#e1").select2("val"));}); // 获取选中的ID值 $("#e1").click(function () { $("#e2").select2("..."}]); }); ---- // 加载数据 $("#e11").select2({ placeholder: "Select report type", allowClear: true...说再多也没用，最后我们来个实例来证明一下ajax请求远程数据，以截图为准： image.png image.png

7.2K5 0

select2的使用

首先放上select2的官方文档链接：https://select2.org/ 通过cdn引入select2所需要的库，或者下载到本地引入。...ng-repeat="xxx in list">{{xxx}}--> Wyoming 你必须在其它地方能获取到这个...js块可以这样使用，如下图所示: $(document).ready(function() { $('.js-example-basic-multiple').select2({ data...:[{name:"张三"},{name:"里斯"}] //json格式的数据，当然也可以通过ajax从后端获取数据 }); }); 我上面是用的是angluar，所以直接在controller...$scoper.list=[ "值1","值2" ] //当然也可以使用ajax从后端动他获取数据

1.9K1 0

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

到此，我们已经可以唱者NB的歌欢快的回家了等等，好像忘记什么了，有眼尖的小伙伴可能注意到了，$data都是我们预先准备好的数据，你说这数据量万一很大的情况，不搞死人了嘛，那接下来让我们看看如何实现异步搜索结果...举一个例子，我们现在要查询某一个书名，但是我们的书的数据量大概有100W，很简单，这需要我们根据你的搜索结果异步获取下拉框里面的数据。未完待续，晚点做进一步说明。...来，上家伙，我们来看看如何使用异步搜索功能，工作中尤其是进行关联数据的时候其用途更是大大的，方便性嘛，看看就知道了，好用的不得了。...'; }"), ], 'ajax' => [ 'url' => '这里是提供数据源的接口', 'dataType' => 'json', 'data' => new JsExpression('function...> 上面的代码可直接复制使用，唯独需要修改的就是ajax里对应的url地址。下面我们看看controller层代码是怎么提供数据的。

1.6K2 0

python_day15_前端_jQue

库所不及的，它兼容CSS3，还兼容各种浏览器 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX...如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html(); 基础语法： jquery的基础语法：$(selector).action(...// 有值显示true,没有直接false //也可以直接设定值 attr 跟prop 都是只有一个为查询,两个(第一个是对象,第二个是值) console.log($('.inp2').prop(...// 高度计算 scrollTop //获取下拉框位置并返回顶部 <!...").append($options) }) $("#select2").dblclick(function () { var $remove2 = $("#select2

7K2 0

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

，如果正常加载数据 }, 'onUploadStart': function (file) { InitUpFile...//提示用户Excel格式是否正常，如果正常加载数据 $.ajax({ url: '/User/CheckExcelColumns...，那么我们还可以弹出一个对话框用然后选择具体的信息，最后才提交数据到后台进行处理。...//保存导入的数据 function SaveImport() { //赋值给对象 $("#Company_ID3").select2("...或者我们查看图片文件的时候，可以获得界面效果如下所示: ? ? 以上就是数据的导入、导出及附件的查看处理的介绍内容，希望对大家学习有帮助。

2K7 0

bootstrap-typeahead 自动补全简单的使用教程

案例四，是使用ajax从后台查询出的数据，这个自己摸索的格外头疼，一开始不知道source方法的query参数如何传递进行的，其实使用案例四的格式以后，就将query的数据传递进去了，不用其他操作或者定义变量...及时获取数据示例 ***/ 99 //远程数据源 100 jQuery(function () { 101 var remote_cities = new Bloodhound({ 102...147 //如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中， 148 //你需要获取一个匹配的字符串数组...-- 案例四、开始4 --> 229 230 Ajax获取后台数据 231...处理获取到数据库的数据。

2.2K3 0

Python实现ATM提款机系统

''没有数据库时必须先取消注释这段代码执行一遍后即可正常使用程序了再次注释用户数据就可以保存到数据库了.''' # def create_database(): # '''创建了一个数据库结构...elif select2 == 2: # 取款操作 list_people = people.qu() # 获取用户输入的取款金额存放在列表里 if...continue elif select2 == 3: # 存款操作 list_people = people.cun() # 获取用户存款的金额...continue elif select2 == 4: # 转账操作 list_people = people.zhuan() # 获取对方账号获取转账金额...== 5: # 修改密码 list_people = people.modify_information() # 获取一个旧密码两个新密码 if

2.3K3 0

ajax请求

ajax是无需刷新页面就能从服务器取得数据的方法。...timeout：超时时间 ontimeout：超时事件 load事件：onload 属性event，指向XHR对象实例 progress事件：onprogress 属性event，获取传输进度跨域：一个简单的使用...如果服务器任务请求可以接收，在Access-Control-Allow-Origin头部中回发相同的源信息。如果没有头部或头部源信息不匹配，浏览器会驳回请求。正常情况下，浏览器会处理请求。...XDR对象（XDomainRequest）：调用open（），接收两个参数：请求类型和URL，再调用send(),只支持异步执行。只要响应有效就会触发load事件，如果失败，会触发error事件。...但不能使用setRequestHeader()设置自定义头部，不能发送和接收cookie，调用getAllResponseHeaders()方法总会返回空字符串。

2.4K3 0

动态博客的后台定制

Tag 与 Category 输入框 Tag与Category是Post的两个属性，其中一个是多对多关系，另一个是一对多关系。...Flask-Admin 原生支持这两种类型的属性输入框，但有以下不足：基于 Select2 3.x，不支持自由输入的选择框（tags）。无法动态添加不存在的项到数据库中。...({tags: true}); }); 现在可以自由输入了，还需要动态添加。...所以我们要重载QuerySelectField的行为，则需要继承AdminModelConverter，重载下面的_model_select_field方法，再将其加载到我们自定义的ModelView就可以了...SQLAlchemy 中有cascade属性，用来指定parent改变时child的行为，但不符合我们的要求，因为我们要的是一对多和多对多关系中「多」的一方变化时另一方的行为。

8981 0

什么是跨域？一文弄懂跨域的全部解决方法

没有同源策略，浏览器的许多功能可能无法正常工作。整个Web体系建立在同源策略之上，浏览器是这一策略的具体实现。该策略禁止来自不同域的JavaScript脚本与另一个域的资源进行交互。...这意味着不同源的网页之间不能共享存储数据。无法操作不同源网页的DOM。每个网页的DOM只能由其自己的脚本访问，不能被其他源的脚本操作。无法向不同源地址发起AJAX请求。...因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景...如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。...)， * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问 */

13K2 1

一段探索React自建内部构造的旅程

这个阶段有两个方法可以用：componentWillMount()和componentDidMount()。...现在可以更新DOM元素了，这意味着这个方法是初始化其他需要访问DOM或操作数据的第三方库的最佳时机。假设我们想要通过API拉取数据来初始化组件。...此方法有两个参数： prevProps：旧的属性 prevState：旧的state 这个方法的一个常见使用场景是当我们使用需要操作更新后的DOM才能工作的第三方库——如jQuery插件的时候。...可以在内部执行任何可能需要的清理工作，如无效的计数器或者清理一些在componentDidMount()/componentDidUpdate()内创建的DOM。...比如在Select2组件里边我们可以这样子： ... componetWillUnmount: function(){ $(this.

1.4K4 0

学习jQuery？这篇文章就够了

3、jQuery能干什么 jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。...jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 AJAX 以及其他功能。...jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用二、jQuery引入和初体验 1、拷贝 jQuery 文件到项目中把 jQuery-1.11 文件夹拷贝到项目的 webapp...id="content"> 【乘客#为少付1元车费致两公交相撞#：辱骂并拉拽驾驶员使公交车失控】5月7日16时18分，浙江宁波一男性乘客因不愿按规定缴纳车费，辱骂并强行拉拽驾驶员胳膊，致使正常行使中的公交车失控...虽然 jQuery 对象包装了 DOM 对象但是两者不能混用，各位可以理解为 jQuery 对象与 DOM 对象是两个不类型的对象，但是我们调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM

13.6K1 0

什么是跨域跨域解决方法_500错误原因解决方法

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。...document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）.../test1.com向子窗口http://test2.com发消息（子窗口同样可以通过该方法发送消息给父窗口）它可用于解决以下方面的问题：页面和其打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的...如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。...)， * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问 */

2.4K2 0

Scrapy爬虫教程二浅析最烦人的反爬虫手段

案例：前程无忧网随便打开一个前程无忧工作界面，直接用requests.get对其进行访问，可以得到一页的20个左右数据，显然得到的不全，而用webdriver访问同样的页面可以得到50个完整的工作信息...六.ajax异步传输访问网页的时候服务器将网页框架返回给客户端，在与客户端交互的过程中通过异步ajax技术传输数据包到客户端，呈现在网页上，爬虫直接抓取的话信息为空解决办法：通过fiddler或是wireshark...抓包分析ajax请求的界面，然后自己通过规律仿造服务器构造一个请求访问服务器得到返回的真实数据包。...案例：拉勾网打开拉勾网的某一个工作招聘页，可以看到许许多多的招聘信息数据，点击下一页后发现页面框架不变化，url地址不变，而其中的每个招聘数据发生了变化，通过chrome开发者工具抓包找到了一个叫请求了一个叫做...如果不正确，返回521状态码，set-cookie并且返回一段js代码通过浏览器执行后又可以生成一个cookie，只有这两个cookie一起发送给服务器，才会返回正确的网页内容。

2.8K0 0

用 DMOJ 搭建属于自己的 OJ

可以从官方提供的下载地址获取基本文件，也可以直接使用我提供的配置文件 local_setting.py，内容如下。.../jquery/2.2.4/jquery.min.js' SELECT2_JS_URL = '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2....min.js' SELECT2_CSS_URL = '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' # A...在这一步，只需要修改应用秘钥、数据库密码、语言、时区、站点基本信息，其他中文标注地方可以在后续步骤进行修改。修改完成后，执行以下命令进行验证。...当然也有在测试过程中是可以正常运行的，而使用 supervisord 和 nginx 之后突然就不能了。

4.1K5 0

使用TamperMonkey解决Google被墙stackoverflow无法正常使用的问题

但是这么一个好网站居然因为Google被墙而无法正常使用（无法登录，无法评论、回答问题等）着实让人不爽呀。以前还有V**可以用的，现在大部分V**都被查封了。。程序员的日子真的是越来越难过了呀。。...解决思路首先我们找到Stackoverflow无法正常使用的原因。...打开浏览器控制台，发现控制台报了很多的错，如下图：我们发现第一个错是获取https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/...除了访问外国网站或者Google被解封，不然我们不可能从原有地址获取该jquery文件，但是我不想用V**（因为买不起），所以我想能不能从其他CDN获取相同版本的jquery文件再让stackoverflow...我们打开 stackoverflow.com，可以看到jquery已经成功下载，网页头部的红色提示信息也消失了，网站可以正常使用了。

3.1K6 1

教你轻松截获 Selenium 中的 Ajax 数据

之前我们介绍了 ajax-hook 来实现爬虫的过程中截获 Ajax 请求，在这里再另外介绍一个工具 BrowserMob Proxy，利用它我们同样可以实现 Selenium 爬虫过程中 Ajax 请求的获取...这里可以看到所有的数据都能获取到了，包括 Ajax 结果、JavaScript、CSS 文件内容等等。...所以，这样我们就能从 Selenium 中获取 Ajax 请求内容了。...这里我们就提取了 Ajax 数据，然后保存下来了。最终运行下，我们就可以看到一条条的电影数据就被保存下来了，如图所示： ? 是不是方便多了？...有了它我们连页面解析的那一步都直接省略了，直接拿到了原始 Ajax 数据，舒服。当然上面的框架还有很多很多需要优化的地方，大家可以参考思路自己实现。

3.6K2 3

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭