我有两个下拉菜单 分别对应着站点信息和库房信息,我想做一个关联,在选择站点下来菜单时,库房的下来菜单只有站点内的信息 该怎么写
时间: 2024-01-21 11:19:31 浏览: 117
div+css写的下拉菜单
你可以在站点下拉菜单的选项中设置一个 `data-*` 属性,用来存储该站点对应的库房信息。然后在选择站点时,通过 JavaScript 获取选中的站点信息,并根据该信息动态生成库房下拉菜单的选项。
具体实现可以参考以下代码示例:
HTML 代码:
```html
<label for="site-select">站点信息:</label>
<select id="site-select">
<option value="">请选择站点</option>
<option value="site1" data-warehouses="warehouse1,warehouse2">站点1</option>
<option value="site2" data-warehouses="warehouse3,warehouse4">站点2</option>
<option value="site3" data-warehouses="warehouse5,warehouse6">站点3</option>
</select>
<label for="warehouse-select">库房信息:</label>
<select id="warehouse-select">
<option value="">请选择库房</option>
</select>
```
JavaScript 代码:
```javascript
var siteSelect = document.getElementById('site-select');
var warehouseSelect = document.getElementById('warehouse-select');
siteSelect.addEventListener('change', function() {
var selectedSite = siteSelect.options[siteSelect.selectedIndex];
var warehouses = selectedSite.dataset.warehouses.split(',');
// 清空库房下拉菜单的选项
warehouseSelect.innerHTML = '<option value="">请选择库房</option>';
// 动态生成库房下拉菜单的选项
warehouses.forEach(function(warehouse) {
var option = document.createElement('option');
option.value = warehouse;
option.textContent = warehouse;
warehouseSelect.appendChild(option);
});
});
```
在上面的代码中,我们通过 `data-warehouses` 属性来存储每个站点对应的库房信息,然后在选择站点时,通过 `dataset.warehouses` 属性获取选中站点的库房信息,并动态生成库房下拉菜单的选项。
注意,上面的代码只是一个简单的示例,实际应用中还需要根据具体需求进行修改和完善。
阅读全文