JQuery EasyUI Combobox联动

最新推荐文章于 2018-08-24 16:12:29 发布

weixin_33785108

最新推荐文章于 2018-08-24 16:12:29 发布

阅读量79

点赞数

文章标签： javascript json ViewUI

本文介绍了一个使用JavaScript实现的Combobox控件联动示例。通过设置ID属性，实现了不同Combobox之间的联动选择。示例中包括了年份、单位名称、模块名称及指标名称的选择级联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、js

 $(function () {
            var _mkid = $('#mkid').combobox({
                url: '../Source/Public/json.ashx?action=mkmch',
                editable: false,
                valueField: 'mkid',
                textField: 'mkmch',
                onSelect: function (record) {
                    _zhbid.combobox({
                        disabled: false,
                        url: '../Source/Public/json.ashx?action=zhbmch&&mkid=' + record.mkid,
                        valueField: 'zhbid',
                        textField: 'zhbmch'
                    }).combobox('clear');
                }
            });
            var _zhbid = $('#zhbid').combobox({
                disabled: true,
                valueField: 'zhbid',
                textField: 'zhbmch'
            });
        });

2、html

   <form id="fm" method="post" novalidate>  
            <fieldset style="border:solid 1px #aaa;padding:5px;">
                <legend >基本信息</legend>
                <div style="padding:3px;">
                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width:480px;">
                        <tr>
                            <td class="td-right1-color">
                                年 份：</td>
                            <td style="width: 160px">
                                 <select class="easyui-combobox" name="rq" style="width:166px;">
                                     <option value="2012">2012</option>  
                                     <option value="2013">2013</option>  
                                     <option value="2014">2014</option>  
                                     <option value="2015">2015</option>  
                                     <option value="2016">2016</option>  
                                     <option value="2017">2017</option>  
                                     <option value="2018">2018</option>  
                                     <option value="2019">2019</option>  
                                     <option value="2020">2020</option>  
                                 </select>
                            </td>
                            <td class="td-right2-color">
                                单位名称：</td>
                            <td style="width: 160px">               
                                 <input class="easyui-combobox" name="dwid" style="width:166px" url='../Source/Public/json.ashx?action=dwmch' 
                                 data-options="valueField:'dwid', textField:'dwmch', panelHeight:'auto'" >  
                            </td>
                        </tr>
                        <tr>
                            <td class="td-right1-color">
                                模块名称：</td>
                            <td style="width: 160px">
                                 <input class="easyui-combobox" id="mkid" style="width:166px"
                                 data-options="valueField:'mkid', textField:'mkmch', panelHeight:'auto'" >  
                            </td>
                            <td class="td-right2-color">
                                指标名称：</td>
                            <td style="width: 160px">               
                                <input class="easyui-combobox" id="zhbid" style="width:166px"  
                                 data-options="valueField:'zhbid', textField:'zhbmch', panelHeight:'auto'" >  
                            </td>
                        </tr>
                           <tr>
                            <td class="td-right1">
                                本年指标：</td>
                            <td style="width: 160px">
                                 <input name="zhbvalue" style="width:160px">  
                            </td>
                            <td class="td-right2">
                                </td>
                            <td style="width: 160px">               
                               
                            </td>
                        </tr>
                    </table>   
                 </div>
            </fieldset>
         
        </form>

注：Combobox必须设置ID属性，否则不能联动。