下拉框级联

一、功能描述：下拉框“模型”有两个下拉项：CMAQ、Wrf-Chem

                            选中“Wrf-Chem”，“区域”下拉框选中“吕梁及周边”并置灰，不可选；选中“CMAQ”，“区域”变可选。

1>模型下拉框

                        <td>
                        模型：<select id="cob_model" class="easyui-combobox" data-options="width:88,onSelect:ModelItemChange">
                        <option value="1" selected>CMAQ</option>
                        <option value="2">Wrf-Chem</option>
                        </select>
                        </td>

2>区域下拉框

                        <td>
                        区域：<select id="cob_region" class="easyui-combobox" data-options="width:65">
                               @*<option value="0" >华北</option>
                               <option value="1">山西</option>*@
                               <option value="2" selected>吕梁及周边</option>
                            <option value="3" >吕梁市辖区</option>
                        </select>
                    </td>

3>scrip方法

         //模型改变时，显示的区域
        function ModelItemChange(record) {
              if (record.text == "Wrf-Chem") {
                       $("#cob_region").combobox('setValue', '2');//wrf-chem只有第三层的数据
                       $("#cob_region").combobox('disable');
               } else {
                       $("#cob_region").combobox('enable');
               }
          }

二、功能描述：下拉框“预报模式”有两个下拉项：统计预报、数值预报

                     选中“统计预报”，“模型”、“区域”两个下拉框置灰，不可选；选中“数值预报”，“区域”、“模型”两个变可选。

                     选中“Wrf-Chem”，“区域”下拉框选中“吕梁及周边”并置灰，不可选；选中“CMAQ”，“区域”变可选。

1>预报模式下拉框

                       <td style="padding-left: 10px;">
                        预报模式：<select id="cob_modelCate" class="easyui-combobox" data-options="width:80,onSelect:ModelCateItemChange">
                        <option value="0" >统计预报</option>
                        <option value="1" selected>数值预报</option>
                        </select>
                    </td>

2>模型下拉框

                       <td style="padding-left: 10px;">
                        模型：<select id="cob_model" class="easyui-combobox" data-options="width:100,onSelect:ModelItemChange">
                        <option value="1" selected>CMAQ</option>
                        <option value="2">Wrf-Chem</option>
                        </select>
                    </td>

3>区域下拉框

                       <td style="padding-left: 10px;">
                        区域：<select id="cob_region" class="easyui-combobox" data-options="width:80">
                        <option value="2" selected>吕梁及周边</option>
                        <option value="3">吕梁市辖区</option>
                        </select>
                    </td>

4>script方法：（选中“统计预报”，“模型”、“区域”两个下拉框置灰，不可选；选中“数值预报”，“区域”、“模型”两个变可选。）

                       //预报模式改变事件
                       function ModelCateItemChange(record) {
                               if (record.text == "统计预报") {
                                   $("#cob_model").combobox('disable');
                                   $("#cob_region").combobox('disable');
                               } else {
                                   $("#cob_model").combobox('enable');
                                   $("#cob_region").combobox('enable');
                               }
                           }

5>script方法：（选中“Wrf-Chem”，“区域”下拉框选中“吕梁及周边”并置灰，不可选；选中“CMAQ”，“区域”变可选。）

         //模型改变时，显示的区域
        function ModelItemChange(record) {
              if (record.text == "Wrf-Chem") {
                       $("#cob_region").combobox('setValue', '2');//wrf-chem只有第三层的数据
                       $("#cob_region").combobox('disable');
               } else {
                       $("#cob_region").combobox('enable');
               }
          }

三、功能描述：‘范围’下拉框选择“监测断面”时，‘名称’下拉框里是断面的名称

        //切换‘范围’，显示对应的名称
        $("#fanwei").combobox({
            onSelect: function () {
                var value = $("#fanwei").combobox("getValue");
                cbx_S(value);
            }
        })

                      范围:

                        <select id="fanwei" class="easyui-combobox" data-options="width:120">
                            @*onSelect: function(rec){
                            var value = $('' #fanwei'').combobox(''gettext'');
                            var url='GetSection1?id=' +value;
                            $('#sectionname').combobox('reload', url);
                            },*@
                            @*οnchange="cbx_S()"*@
                            <option value="监测断面" selected>监测断面</option>
                            <option value="区县">区县</option>
                            <option value="市">市</option>
                            <option value="省">省</option>
                        </select>

                      名称:                       
                        <input type="text" style="width:100px;" id="sectionName" name="sectionName" class="easyui-combobox" data-options="" />
                        @*url:'@Url.Action("GetSection")',value:'110000HRSK01'*@

                          $(function () {
        getName();
        //切换‘范围’，显示对应的名称
        $("#fanwei").combobox({
            onSelect: function () {
                //var value = $("#fanwei").combobox("getText");
                //var url = 'GetSection1?id=' + value;
                //$('#sectionName').combobox('reload', url);
                getName();
                //var data = $('#sectionName').combobox('getData');
                //$('#sectionName').combobox('select', data[0].text);
                //cbx_S(value);
            }
        })
    });

    function getName() {
        $.ajax({
            url: '@Url.Action("GetSection1")',
            dataType: "json",
            type: "post",
            data: {
                id: $("#fanwei").combobox("getText")
            },
            success: function (result) {
                console.info(result);
                $('#sectionName').combobox({
                    value: result[0].id,
                    data: result,
                    valueField: 'value',
                    textField: 'text'
                });
            }
        });
    }