将上面的数据用动态加载的方式实现
时间: 2024-03-03 12:51:57 浏览: 20
好的,让我们来实现动态加载。
首先,我们需要在 HTML 页面中创建一个按钮或链接,用于触发弹出选项卡:
```html
<button id="declareCompanyBtn">选择运输公司</button>
```
然后,在 JavaScript 中编写动态加载的代码:
```javascript
function declareCompanyNick() {
// 创建甲类公司列表
var a_content = '<div class="tranCompany"><ul><li>';
a_content += '<a href="javascript:void(0)" class="declareCompanyNick">' + '汕头' + '</a>';
a_content += '</li><li>';
a_content += '<a href="javascript:void(0)" class="declareCompanyNick">' + '卓志' + '</a>';
a_content += '</li></ul></div>';
// 创建乙类公司列表
var b_content = '<div class="tranCompany"><ul><li>';
b_content += '<a href="javascript:void(0)" class="declareCompanyNick">' + '忠国' + '</a>';
b_content += '<a href="javascript:void(0)" class="declareCompanyNick">' + '汇乐宝' + '</a>';
b_content += '</li></ul></div>';
// 弹出选项卡
layer.tab({
shadeClose: true,
area: ['600px', '300px'],
tab: [
{
title: '甲类公司',
content: a_content
},
{
title: '乙类公司',
content: b_content
}
]
});
// 选择公司
$(".declareCompanyNick").click(function () {
var _th = $(this).text();
$("#declareCompanyNick").val(_th);
layer.closeAll();
});
}
// 绑定按钮或链接的点击事件
$("#declareCompanyBtn").click(function () {
declareCompanyNick();
});
```
在这个代码中,我们将弹出选项卡的代码封装在了 `declareCompanyNick` 函数中。当用户点击按钮或链接时,会执行这个函数,并弹出选项卡。然后,我们在选项卡中绑定了公司名称的点击事件,当用户点击某个公司名称时,会将其填入名为 "declareCompanyNick" 的输入框中,并关闭选项卡。
注意,我们需要使用 jQuery 库,以便在 JavaScript 中操作 DOM 元素和绑定事件。还需要在 HTML 页面中引入 Layer 弹出层插件的 CSS 和 JavaScript 文件。