开发工具与关键技术:VS软件,多个下拉框数据绑定
作者:陈隆
撰写时间:2019年05月01日
下拉框的数据绑定其实就是要把相关的数据查询出来,查询数据库中已有的数据然后返回到页面就可以在下拉框中绑定就有数据了显示了,想完成下拉框的数据绑定首先需要把下拉框的布局样式部分,就是HTML部分先完成才可以往下进行数据的绑定,HTML代码可以使用bootstrap4这个插件来布局,目前bootstrap4是现在最主流的一种插件,使用插件就不会有大量的代码存在,使用插件就是为了快速的开发,和简化代码,做到用最少的代码创建最好的页面,这就是插件的用处,插件可以在网上搜索来下载,然后引用到所做的项目中就可以使用了,那么下面就开始写一下HTML的代码部分。(HTML代码部分截图)
HTML部分的代码就是整个项目最简单的一个,也是最耗费时间的一个部分,因为布局要不断的调整,就是在这里浪费了许多的时间,这里HTML的代码首先要给一个div包裹着全部的代码,还要设置为自动适应屏幕的大小,然后又给一个div包着一个form表单并沾满一行,然后就按照插件的代码来给样式就行了,再分别给每个下拉框起一个不一样的ID,还有考虑到在手机等移动端显示的就要强制换行并设置边距就可以适应移动端了,HTML代码就完成了,下面就是要写绑定下拉框的js代码了。(js部分代码截图)
这里js部分的截图其实说的也很明白的了,里面绿色的就是说明代码的主要意思,这里的代码是写在function中的,学院下拉框的数据绑定也就是要用到createSelect这个方法,这个插件需要引用来使用,插件名称:customfunction.js,可以在网上收索下载来用,记得需要在项目中引用才可以使用里面的方法,然后获取到HTML中的下