<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>comboBox</title> <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ $("#cp_role").combobox({ valueField:‘id‘, textField:‘name‘, data:[{ id:‘0‘, name:‘短信类‘ }, { id:‘1‘, name:‘语音类‘ }, { id:‘2‘, name:‘GPRS流量类‘ }, { id:‘3‘, name:‘音乐类‘ }, ], onChange:function(newValue, oldValue){ var v_region_name = $("#region_name").val(); var data= $("#cp_role").combobox("getData"); //if("" ==v_region_name ) { $("#region_name").val( data[newValue].name ); } } }); }); </script> </head> <body> <p>功能：下拉列表的数据改变时，影响输入框的内容</p> <select id="cp_role" class="easyui-combobox" style="width:80px;" data-options="‘panelHeight‘:100,‘editable‘:false"> </select> <input id="region_name" type="text" style="width:80px;"></input> </body> </html>
主要是为了练习jquery、jQueryUI的使用。 功能是实现了 一个下拉列表，当下拉列表的数据改变时，输入框的内容也会改变。