（一）按F12或者“Ctrl+Shift+I”打开开发者工具

（二）找到下拉列表的id

1、找到“Elements”；

2、点击①所代表的选择元素，再定位到下拉列表，并记住select标签（代表的是下拉列表）里的id，本例中为“sel_area"；

（三）在console中查看结果

在“Console”中添加如下代码，其中“sel_area”为第（二）步中获得的下拉列表id，

alert(document.getElementById("sel_area").length);

按回车即可弹出结果：

一、开篇

大家新年好！祝大家新年新气象、一切顺心如意！

好久没有更新了，过年期间大家都懂的，参与了很多的“膘局”，而且护膘成功。。。

上一个教程跟大家说过了，有了前面的教程，大家其实都可以轻松地做一个比较简单的软件或者系统了。那么今天开始，我们讲解一些更加深入的东西，帮助大家完善各种功能并满足软件的细节性需求。

二、效果

比方说下面的这个截图，就是我们今天想要实现的效果。

大家注意，这里不是下面的项目列表筛选不成功，我当时随便创建了两条记录，其中一条记录说是“无锡某炼油工程项目”，但是我是把它的地址设置为了“苏州”的。

三、目的

我们之前的项目清单页面已经可以搜索了，但是只能按照项目编号和项目名称进行查找或者搜索，让我们先回顾一下：

假设我们需要按照区域来查看项目，并对这些项目有一些信息的汇总，那么我们就可以开始设计了。最终会在这个项目清单的下方添加一个“按区域显示”的按钮，点击之后会让我看到按照区域显示的界面，就是我们这章第二部分讲到的效果截图。

四、页面设计

1. 新建屏幕

这个就很简单了，大家可以直接复制一个屏幕，比方说我们现有的项目清单这个屏幕，然后删除掉不需要的控件，修改一下屏幕的名称。

2. 添加下拉列表控件

假设我们希望按照省份以及城市来进行筛选，那我们可以创建一个省份的下拉列表，以及一个城市的下拉列表；同时，城市的列表选项会随着省份的变化而发生变化，也就是说当我们的省份选择了“江苏省”的时候，城市的列表就只显示江苏省的城市。

2.1 创建省份下拉列表

我们先创建省份/直辖市下拉列表：

我们调整好这个下拉列表的尺寸和位置，然后在属性列表选择“Items”，然后在后边的公式输入区域进行数据的设置。

第一种方式就是直接使用列表，比方说我们截图里边显示的，中括号，然后用逗号分隔列表值，同时，记得使用英文的双引号引起来：

["上海市","湖南省","广东省","海南省","江苏省","山东省"]

第二种方式就是可以直接利用数据源里边的值了，我们等一会再细聊。

2.2 创建城市下拉列表
省份与城市是存在有从属关系的，而且是1对N的关系，也就是一个省份可以有很多的城市；那么我们可以先在我们的数据源里创建这个列表，从而当我们调用数据的时候，就可以用现存的逻辑关系来对城市进行筛选了。

大家可以看到，这里的“Items”属性我们用的就不是列表值了，而是用了公式。这就是第二种方式了。
我们提到了，数据源已经设置了省份和城市的关系列表，我们这里就是直接调用了。

Filter(City,Province.Value=Dropdown1.Selected.Value)

在这个公式里，City是我们数据源里的省份和城市的关系列表，有一列的属性名称为“Province”，Dropdown1是我们上面2.1部分创建的省份下拉列表。大家看看效果：

3. 添加列表并进行筛选
下面我们来添加一个Gallery，用来显示项目清单，同时利用已经建立的下拉列表来进行筛选：

公式如下：

Filter(HomeProjectList,ProjectCity=Dropdown1_1.Selected.City)

这里的Dropdown1_1就是我们创建的城市下拉列表。
效果如下：

4. 增加图表控件
假设我们还要显示一张图表，目的是用来显示这个城市项目的成本发生的情况，按照月份进行显示。当然，大家可以按照自己的设想去添加任何其他控件，我这里也是随便设想了一种设计方式。

这一讲我就不对图表进行详细描述了，因为图表的设置需要单独一个教程来阐述。所以这里只显示效果图。大家见谅。

5. 在项目列表页面增加跳转按钮
虽然我们算是把页面设计好了，但是其实我们还缺少一个按钮，就是说如何跳转到这个页面，那其实就很简单了，我们需要回到项目清单列表，并添加一个“按区域显示”的按钮。大家直接看截图：

好了，算是大功告成了。。。

五、总结

上面我说大功告成了，其实没有。。。大家仔细想想其实还是能发现的，比方说我们在区域显示的页面没有一个按钮回到项目清单，这个其实不用我教啦，就是添加一个按钮的事。

留给大家的思考：

说是留给大家的思考，其实是我太懒了，可能膘长太多了吧！好了，拉回来！

思考：

现在的筛选只能按照城市进行筛选，假设我想按照省份筛选，就是说，当我选择“江苏省”的时候，城市的下拉列表不要直接显示城市的清单中默认的第一个选项，而是默认显示“所有”，只有当我自己对城市进行选择的时候才按照城市显示，否则就只显示“江苏省”的省份数据。这样的话，我们既可以看到省份的统计数据，也可以看到城市的统计数据。
好了，希望大家学到了今天的内容，并且对我提出的思考去稍微思索一下，我们下一讲见，谢谢大家！

开发中难免有各种需求，近期项目中需要自定义下拉框的使用。实现效果如图，展开状态箭头向上，收起的时候箭头向下，选中状态选中条目颜色可变，可设置下拉框高度。效果如下

自定义CustomSpinner.java

public class CustomSpinner extends LinearLayout{

    private View view;
    private TextView tv_name;
    private ImageView ib;

    //界面控件
    private ImageView spinner;
    //构造qq号用到的集合
    private List<String> list = new ArrayList<String>();
    //布局加载器
    //自定义适配器
    private MyAdapter mAdapter;
    //PopupWindow
    private PopupWindow pop;
    //是否显示PopupWindow，默认不显示
    private boolean isPopShow = true;
    private ListView listView;
    private LayoutInflater mInflater;
    private OnItemSelectedListenerSpinner onItemSelectedListener;
    private int heiht;
    private int postion = 0;

    public CustomSpinner(Context context) {
        super(context);
        initView(context);
    }

    public CustomSpinner(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public CustomSpinner(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    public CustomSpinner(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView(context);
    }

    private void initView(final Context context) {
        mInflater = LayoutInflater.from(context);
        view = mInflater.inflate(R.layout.layout_customspinner, null);

        mAdapter = new MyAdapter();
        tv_name = (TextView) view.findViewById(R.id.et_name);
        ib = (ImageView) view.findViewById(R.id.spinner);
        tv_name.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                L.e("isshow--"+isPopShow);
                if (null != list){
                    if(pop == null){
                        listView = new ListView(context);
                        listView.setCacheColorHint(0x00000000);
                        listView.setDividerHeight(0);
                        listView.setBackgroundColor(Color.rgb(255,255,255));
                        listView.setAdapter(mAdapter);
                        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                            @Override
                            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                                postion = i;
                                mAdapter.notifyDataSetChanged();
                                tv_name.setText(list.get(i));
                                ib.setImageResource(R.drawable.ic_arrow_drop_down_black_24dp);
                                pop.dismiss();
                                isPopShow = true;
                                CustomSpinner.this.view.setTag(getId());
                                onItemSelectedListener.onItemSelected(CustomSpinner.this.view,view,i,l);
                            }
                        });

                        if (heiht == 0){
                            int hei = setListViewHeightBasedOnChildren(listView);
                            //这里设置下拉框的高度
                            if (hei >= 550){
                                pop = new PopupWindow(listView, CustomSpinner.this.view.getWidth(), 550, true);
                            }else{
                                pop = new PopupWindow(listView, CustomSpinner.this.view.getWidth(), hei, true);
                            }
                        }else{
                            pop = new PopupWindow(listView, CustomSpinner.this.view.getWidth(),heiht, true);
                        }
                        pop.setBackgroundDrawable(new ColorDrawable(0x00000000));
                        pop.setFocusable(true);
                        pop.setOnDismissListener(new PopupWindow.OnDismissListener() {
                            @Override
                            public void onDismiss() {
                                isPopShow = true;
                                ib.setImageResource(R.drawable.ic_arrow_drop_down_black_24dp);
                            }
                        });
                        ib.setImageResource(R.drawable.ic_arrow_drop_down_black_24dp_right);
                        pop.showAsDropDown(view,0, 0);
                        isPopShow = false;
                    }else{
                        if(isPopShow){
                            ib.setImageResource(R.drawable.ic_arrow_drop_down_black_24dp_right); //向上的箭头
                            pop.showAsDropDown(view, 0, 0);
                            isPopShow = false;
                        }else{
                            ib.setImageResource(R.drawable.ic_arrow_drop_down_black_24dp); //向下的箭头
                            pop.dismiss();
                            isPopShow = true;
                        }
                    }
                }
                onClickCustom();
            }
        });
        if (list == null || list.size() == 0){
            tv_name.setText("");
        }else{
            tv_name.setText(list.get(0));
        }
        addView(view);
    }

    public static int setListViewHeightBasedOnChildren(ListView listView) {
        // 获取ListView对应的Adapter
        ListAdapter listAdapter = listView.getAdapter();
        if (listAdapter == null) {
            return 0;
        }
        int totalHeight = 0;
        for (int i = 0; i < listAdapter.getCount(); i++) { // listAdapter.getCount()返回数据项的数目
            View listItem = listAdapter.getView(i, null, listView);
            listItem.measure(0, 0); // 计算子项View 的宽高
            totalHeight += listItem.getMeasuredHeight(); // 统计所有子项的总高度
        }
        int ff = totalHeight
                + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
        return ff;
    }

    public void onClickCustom(){

    }

    public void attachDataSource(List<String> list){
        this.list = list;
        tv_name.setText(list.get(0));
    }
    public void setOnItemSelectedListener(OnItemSelectedListenerSpinner onItemSelectedListener){
       this.onItemSelectedListener = onItemSelectedListener;
        Log.e("www","走了");
    }
    public void setSpinnerHeiht(int heiht){
        this.heiht = heiht;
    }
    public void setSelectedIndex(int index){
        tv_name.setText(list.get(index));

        onItemSelectedListener.onItemSelected(null,null,index,index);
    }

    private class MyAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return list.size();
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return list.get(position);
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            View view = mInflater.inflate(R.layout.item, null);
            if (position == CustomSpinner.this.postion){
                //选中条目的背景色
                view.setBackgroundColor(Color.rgb(26,208,189));
            }
            final TextView tv_name = (TextView) view.findViewById(R.id.tv_name);
            tv_name.setText(list.get(position));
            //设置按钮的监听事件
            view.setTag(tv_name);
            return view;
        }

    }

    @Override
    public void destroyDrawingCache() {
        if (pop != null && pop.isShowing()){
            pop.dismiss();
        }
        super.destroyDrawingCache();
    }
}

//布局文件layout_customspinner

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center_vertical"
    android:background="@color/white">

    <ImageView
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_arrow_drop_down_black_24dp" 
        android:paddingRight="2dp"
        android:layout_alignParentRight="true"
        />

    <TextView
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@color/black"
        android:gravity="center"
        android:clickable="true"
        android:layout_toLeftOf="@id/spinner"
        android:hint="数据加载中" />

</RelativeLayout>

//布局item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center">

    <TextView 
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:textSize="14sp"
        android:gravity="center"
        android:layout_marginRight="14dp"
        android:text="aaaaa"
        />

</LinearLayout>