# 在华为云Astro轻应用标准页面中，如何实现下拉框选项值的筛选功能？
#### 问题描述
如何实现下拉框选项值中，根据某输入框中值，筛选显示，而不是显示全部选项值。
例如，某商品分为上架、下架和测试三个阶段。当前商品导航条页面**下拉框A** 中，展示的选项是所有状态的商品，会出现很多脏数据，导致用户难以正确选取。此时，可以通过添加一个**输入框B** ，实现**下拉框A** 的选项值根据**输入框B** 输入的值进行筛选。例如，输入框B中输入Online，下拉框A中只显示所有上架状态的商品，如[图1]。
图1实现效果   
![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891232989.png)
#### 解决方法
这里可以通过设置标准页面的输入框和下拉框，来实现自定义下拉框选项取值。
1. 向标准页面工作区域拖入一个"输入框"组件，在输入框属性设置中，单击![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891233001.png "点击放大")，进行数据绑定。
   
   图2拖入输入框   
   ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891232981.png "点击放大")
   
   
2. 单击"新增模型"，设置模型名称为"Key"，选择"自定义"，单击"下一步"。
   
   图3配置自定义模型   
   ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891233013.png "点击放大")
   
   
3. 单击"新增节点"，新增"value"字段，字段类型为Text，单击"下一步"。 
   图4新增节点   
   ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891073449.png "点击放大")
   
   
4. 本示例无需添加方法，直接单击"确定"。
5. 在选择模型中，选中创建的数据模型"value"字段，单击"确定"。
   
   图5选中字段   
   ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891073429.png "点击放大")
   
   
6. 选中输入框组件，在"事件"页签，单击"失去焦点"后的![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891233009.png)。
   
   图6设置事件   
   ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891073445.png "点击放大")
   
   
7. 在代码编辑区域，编辑事件代码，单击"创建"。 
   图7自定义JS代码   
   ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891073425.png "点击放大")
   系统中已存在商品对象"*命名空间* __Product__CST"，并有"name"和"*命名空间*__status__CST"两个字段，分别是商品名和商品状态，且已有对象数据。该事件代码实现的是将输入框中输入值value等同于商品状态的商品名取出来，返回到"list"列表中。
   ```
   // 当前组件 
   // let _component = context.$component.current 
   // 获取名字为${modelName}的数据模型 
   // let _model = context.$model.get('${modelName}') 
   // debugger 
   context.object("命名空间__Product__CST").query({condition:{ 
       conjunction: "AND", 
       conditions: [ 
           { field: "命名空间__status__CST", operator: "eq", value: context.$model.get("Key").getData().value } 
       ] 
   }}).then(function (resp) { 
       context.$model.get("list").setData(resp.map(function (o) { 
           return { 
               display: o.name, 
               value: o.id 
           } 
       })); 
   });
   ```
   
   
8. 单击页面上方的![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891073453.png)，保存页面。
9. 向标准页面工作区域拖入一个"下拉框"组件，在"属性"页签中，单击属性值绑定后的"+"，再单击![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891233001.png "点击放大")。
   
   图8拖入选择框   
   ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001985834581.png "点击放大")
   
   
10. 参考[2]\~[6]，创建自定义"list"数据模型，该模型中新增"display"和"name"两个字段，选中"list"，单击"确定"。
    
    图9新增list模型   
    ![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001891233005.png "点击放大")
    
    
11. 单击页面上方的![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001844873848.png)，保存页面。
12. 页面保存成功后，单击![](https://support.huaweicloud.com/astrozero_faq/zh-cn_image_0000001845032572.png)，预览页面。