“焦点”事件的辅助新增——下拉框数据的刷新

作者：坚定的守猴

撰写时间：2019年7月13日

开发软件和关键技术：VS；JS的焦点(onblur)事件

有时候我们做项目，当数据繁多的时候，出现新增“嵌套”模式。出于业务的需求，在新增页面数据的同时，对于里面下拉框的数据也类似新增表格数据那样，新增之后就也要刷新一下才能出现新增的那一条数据。然而问题就来了，因为我们知道新增之后数据刷新页面之后，那么在我们之前输入还没保存的数据就这样刷新没有了。这种就是出现在新增多个下拉框里面数据的情况下。那么我们要在保证效率的前提下，新增下拉框数据之后就不通过刷新页面来达到显示新增那一条数据的效果。

现在我们就通过调用“焦点”事件的方法，来辅助下拉框数据的刷新这一难题。来看一个例子。

看页面上的下拉框和新增的样式，了解一下这布局。

下拉框的样式

新增的样式

我们要调用“焦点”事件，是要模拟新增数据保存之后表格的刷新，只有刷新之后在下拉框才会显示新增的那条数据。因此就在保存那里给加个“焦点”事件，目的就是要达到那种效果。

接下来再到下面JS获取这个下拉框的ID

代码量就这么简单

为了能明白了然一点，现在对比一下添加焦点事件之前和之后的效果

添加“焦点”事件之前的

我们看一下作业类别的下拉框，它最后的那一条数据的序号是4，然后我们现在新增一条序号为5的进去。

保存之后再回到页面看了一下下拉框，发现序号为5的数据还没显示出来。然后我们就进行页面刷新一下。

刷新页面之后新增那条数据是出来了，不过之前输入没在页面上保存的数据就没有了（对比上图联系人下拉框那里）

现在看一下加了“焦点”事件之后的效果

地址那里的下拉框，然后新增一条数据进去

保存之后看一下

对比保存之前的图片，效果自然而然的出来了。所以呢，这样就完美地诠释了“焦点”事件的作用。（想起之前还没接触过“焦点”事件，为了解决这下拉框刷新的问题而在百度上苦苦追寻答案的我，之前已经尝试过其它方法，反馈回来的结果要么是代码量要翻一倍，要么就是把下拉框换成表格的样式，这样才可以调用页面刷新reload的方法。幸得身边有大神相助，就跟我说了这“焦点”事件的用法，完美的解决了这难题，感谢小滋。）

关于下拉框数据刷新的内容就介绍到这里，如果对于上面内容感到有疑问的地方，欢迎咨询。