两个下拉框都不隐藏的联动查询示例

时间: 2024-09-23 18:02:26 浏览: 37

Angularjs实现下拉框联动的示例代码

在Angularjs中实现下拉框联动是构建动态交互式网页的重要组成部分。联动下拉框通常用于实现基于一个下拉选择来动态变化另一个下拉框的选项。Angularjs提供了几种实现下拉框联动的方法，接下来将基于给定文件内容对Angularjs下拉框联动的实现进行详细阐述。 Angularjs中下拉框联动的基本原理是利用`ng-model`将一个下拉框的选中项与另一个下拉框的模型进行绑定，再通过`ng-change`指令配合自定义函数来动态调整第二个下拉框的数据源。在给定的文件内容中，提到了两种联动方式： **第一种联动方式**是基于两个预设的JSON数据集来实现的联动。在示例代码中，有两个下拉列表，第一个下拉列表的数据来源于`selectDatas`数组，它包括了不同产品类目的名称以及各自的产品类型。第一个下拉列表的`ng-model`被命名为`s1`，而第二个下拉列表的`ng-model`被命名为`s2`。通过`s2`的`ng-options`指令绑定到`s1`当前选中的产品类目下的`utils`数组中，从而实现了两个下拉列表的联动。 ```html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model="s2" ng-options="util.name for util in s1.utils"> <option value="">--产品类型--</option> </select> ``` **第二种联动方式**更为复杂，涉及多个下拉框的联动，并且代码中包含了一些固定值来模拟实际的联动效果。在实际的应用中，这些数据通常会由后端API接口提供，但在这个例子中，为了演示目的使用了硬编码的数据。第二个示例中，第一个下拉框用于选择设备类别（`devicetype`），当选择一个类别时，会触发`ng-change`事件，`changeType`函数将被调用。在这个函数中，根据选中的类别（`category`），会设置当前的设备列表（`yourdevices`）。 ```javascript $scope.changeType = function(x){ $log.log(x.category); //TODO:真正使用肯定是要用$http来请求设备列表 //暂时测试使用下面的 switch(x.category){ case "大家电": $scope.yourdevices = [ {"dev":"电视机(mac:32309fsaf)"}, {"dev":"洗衣机(mac:32309fsaf)"}, {"dev":"冰箱(mac:32309dqsq)"}, {"dev":"空调(mac:32309fsaf)"} ]; break; } } ``` 接着，第二个下拉框用于选择具体设备（`yourdevice`），同样在选择设备后会触发`ng-change`事件，此时会调用`changeDev`函数。这个函数根据选中的设备（`dev`）来设置相关的参数列表（`params`），并将其转换为一个对象（`paramobj`），这样便于后续根据参数名称快速查找对应的数据类型和值。 ```javascript $scope.changeDev = function(x){ $log.log(x.dev); switch(x.dev){ case '电视机(mac:32309fsaf)': $scope.params = [ //参数定义 ]; var paramsarr = $scope.params; var paramobj = {}; paramsarr.forEach(function(v,i){ paramobj[v.display_name] = v; }); $scope.paramobjs = paramobj; break; } } ``` 第三个下拉框用于展示与选中参数相关的视图类型和数据类型。`changeParam`函数根据选中的参数（`x`），从`paramobj`对象中获取相关的视图和数据类型信息。从以上代码和逻辑可以看出，Angularjs下拉框联动的核心在于数据绑定和事件驱动。`ng-model`将下拉框的数据与作用域变量绑定，而`ng-change`则用于监听下拉框值的变化，并触发相应的函数，这些函数进而改变另一个下拉框的数据源，从而实现联动效果。除了上述的两种联动方式，实际开发中可能还会遇到更复杂的需求，比如异步数据加载、错误处理、权限验证等，Angularjs提供了丰富的API和指令来支持这些高级功能。不过，基本的联动逻辑总是围绕数据绑定和事件处理展开。掌握这些知识对于构建动态、响应式的用户界面至关重要。

在一个典型的联动查询示例中，当第一个下拉框（通常称为“主选框”）的选择发生变化时，第二个下拉框的内容会根据主选框的值动态更新。这里有个简单的HTML和JavaScript的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <title>联动查询</title> </head> <body> <select id="province" onchange="loadCities()"> <option value="">请选择省份</option>  </select> <select id="city" style="display: none;"> <option value="">请选择城市</option> </select> <script> function loadCities() { var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); if (provinceSelect.value) { // 假设从服务器获取城市列表 fetch('/api/cities?province=' + provinceSelect.value) .then(response => response.json()) .then(cities => { citySelect.innerHTML = ''; cities.forEach(city => { citySelect.appendChild(new Option(city.name, city.id)); }); citySelect.style.display = 'block'; }) .catch(error => console.error('Error:', error)); } else { citySelect.innerHTML = ''; citySelect.style.display = 'none'; } } </script> </body> </html> ``` 在这个例子中，当用户更改了`province` select的选项，`loadCities`函数会被触发，通过AJAX请求获取与所选省份对应的`city`列表，然后填充到`city` select中。如果没有选择省份，则`city` select会保持默认隐藏状态。

阅读全文

两个下拉框都不隐藏的联动查询示例

相关推荐

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

JS实现的简单下拉框联动功能示例

asp利用json的两个下拉框联动示例代码

最简单的下拉框联动不刷新页面示例

你能举一个带两个下拉框，第一个下拉框作为第二个下拉框条件联动查询的联动查询示例吗

vue两个下拉框联动

Android实现联动下拉框二级地市联动下拉框功能

layui下拉框二级数据联动 fzzx.zip

jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.docx

HTML年月日联动下拉框实现示例

JavaScript实现三级联动下拉框的简易代码示例

ASP.NET MVC联动下拉框实现：省市区数据绑定示例

前端下拉框是怎么进行联动处理的

你能举一个简单的联动查询示例吗

winfrom下拉框二级联动

layui下拉框二级联动

vue 下拉框二级联动

pocketsphinx-0.1.15-cp34-cp34m-win32.whl.rar

【java毕业设计】书画拍卖网站源码（ssm+mysql+说明文档）.zip

最新推荐

C#省份城市下拉框联动简单实现方法

JavaScript实现省份城市的三级联动

pocketsphinx-0.1.15-cp34-cp34m-win32.whl.rar

SSM Java项目：StudentInfo 数据管理与可视化分析

管理建模和仿真的文件

负载均衡技术深入解析：确保高可用性的网络服务策略

怎么解决头文件重复包含

pyedgar：Python库简化EDGAR数据交互与文档下载

"互动学习：行动中的多样性与论文攻读经历"

网络监控工具使用宝典：实时追踪网络状况的专家级技巧