今天用兩種方法實現了動態的給select添加option的功能.
第一種是用jquery.

// html <select id="drag-pointList"></select> // js $('#drag-pointList').children('option').remove(); // 清空之前的option let list = res.data.list ; // res是ajax請求成功返回的結果 let len = list.length; let start = new Date(); if(len > 0){for( let i = 0; i < len; i++) {let item = list[i];let option ={id: item.pointId,name: item.pointName + " - " + item.pointId,}let domOp = '<option value="' + option.id + '"> ' + option.name + '</option>'$('#drag-pointList').append(domOp);}this.form.render('select'); // 使用layui更新select,let end = new Date();console.log('數據:', len, '條 ', '耗時:', end - start, '毫秒'); }

下面是使用ng-repeat的方法實現動態的添加select

// html <select id="drag-pointList"><option value="item.id" ng-repeat='item in dragPointList'>{{item.name}}</option> </select> // js $('#drag-pointList').children('option').remove(); // 清空之前的option let list = res.data.list ; // res是ajax請求成功返回的結果 let len = list.length; let start = new Date(); if(len > 0){for( let i = 0; i < len; i++) {let item = list[i];let option ={id: item.pointId,name: item.pointName + " - " + item.pointId,}this.$scope.dragPointList.push(option); // Angular ($scope掛在了this.$scope上..)}this.form.render('select'); // 使用layui更新select,let end = new Date();console.log('數據:', len, '條 ', '耗時:', end - start, '毫秒'); }

Angular效果如下:

可以看見使用Angular更新渲染select明顯要快…
得出結論利用Jquery生成dom的方式添加select可能比較耗時,應當適當減少對dom的操作…

總結

以上是生活随笔為你收集整理的javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。