下拉框级联

一、功能描述：下拉框“模型”有两个下拉项：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'                 });             }         });     }