在查询查询页面中，有时候并不会把所有查询项都直接显示出来，而是①根据使用者的选项内容，联动下一个下拉框中应供选择的选项；②根据使用者使用的选项细化深度，提供下一个深度查询数据查询的选项；③根据使用者的权限，限制/开发更底层数据的查询权限。如下图：

JavaScript下拉菜单隐藏代码 js隐藏下拉框的选项_为空隐藏

对于这种需求场景，我们可以通过新建下拉框数据集，设置各个下拉框数据集之间的关系，设置下拉框的编辑后JS事件，实现下拉框数据之间的联动，实现定义的条件下，显示/隐藏一些深度查询的选项，灵活控制每个使用者的查询权限，提高数据分析系统的使用方便性。

1、界面设计

查询参数界面设计如下，使用省份、城市、区县来做下拉框数据关联和隐藏/显示。

此处设置 “省份” 下拉框控件名为 type1， “城市” 下拉框控件名为 type2, “区县” 下拉框控件名为 type3。

JavaScript下拉菜单隐藏代码 js隐藏下拉框的选项_下拉框显示_02

2、创建数据集

对应省份、城市、区县下拉框，分别创建数据集，提供给下拉框作为下拉组内数据，其中，城市和区县的数据需要根据前面的选项内容来进行关联，所以需要获取到对应控件的值，做数据筛选。

城市下拉框数据集：

JavaScript下拉菜单隐藏代码 js隐藏下拉框的选项_下拉框隐藏_03

区县下拉框数据集

JavaScript下拉菜单隐藏代码 js隐藏下拉框的选项_数据联动_04

3、设置隐藏/显示

对于需要隐藏的控件，可以在开发时就设置控件为不可见的状态；然后设置JS事件，用来定义此控件在什么条件下隐藏和显示。

此处示例在城市下拉框中设置JS事件，定义条件，控制区县下拉框的隐藏和显示。

JavaScript下拉菜单隐藏代码 js隐藏下拉框的选项_下拉框隐藏_05

代码如下：

var form = this.options.form; 
var thislen = this.getValue().toString().length;  

if(thislen) { 
    form.getWidgetByName("qx").visible();//可见
    form.getWidgetByName("type3").visible();//可见
}else{
    form.getWidgetByName("qx").invisible();//不可见
    form.getWidgetByName("type3").invisible();//不可见
    }

此处通过获取城市下拉框中的长度，控件区县下拉框是否可见，读者也可以根据自己的实际需求情况，设置不同的情况。

4、效果图

JavaScript下拉菜单隐藏代码 js隐藏下拉框的选项_为空隐藏

如上，通过数据集，设置各个下拉框数据集之间的关系，实现下拉框之间的数据联动；通过控件的JS事件，捕捉选择数据时的数据，根据数据的有无或数据内容是什么，条件性隐藏/显示其他下拉框控件；同理，也可以应用在数据分析中，针对不同的用户，隐藏/显示不同的下拉框，控件不同的用户角色有不同的功能，限制各自的数据查询权限和数据查询深度。