在线演示示例 | 捐赠
组件的基本使用方法
您只需按照以下简单步骤即可学会使用lhgselect：
- 首先下载最新版本的lhgselect联动下拉菜单：lhgselect v1.0.0 (2011-06-10)
-
在需要调用lhgselect联动下拉菜单的网页head标签结束之前添加以下代码：
<script type="text/javascript" src="lhgcore.min.js"></script>
注：如果将联动下拉菜单组件做为jQ的组件来使用就不需要加载lhgcore.min.js库文件，而要加载jQ库文件。
<script type="text/javascript" src="lhgselect.min.js"></script><script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="lhgselect.min.js"></script> -
lhgselect提供两种方式调用组件：
<head> <script type="text/javascript">
//第一种jQ调用方式 J(function(){ J('#sel1,#sel2,#sel3').select({ 参数 }); }); //如果作为jQ组件来用的话J就得换成$ $(function(){ $('#sel1,#sel2,#sel3').select({ 参数 }); }); </script> </head> <body> <div id="sele" style="margin:10px;padding:10px;"> <select id="sel1" style="width:100px;"></select> <select id="sel2" style="width:100px;"></select> <select id="sel3" style="width:100px;"></select> </div> <script type="text/javascript"> // 第二种写到html代码中，注意一定要写到要绑定的select元素的下面 var sel = new J.select({ 参数 }); sel.bindSel('#sel1,#sel2,#sel3'); </script> </body>
联动选择下拉菜单的各种在线演示示例
以下示例为了方便都采用第一种调用方式
-
省市地三级联动
// data变量数据你可以右键查看页面源代码中查看数据的形式，数据为json对象数据 J('#demo1 select').select({ data: data }); -
设置默认值
J('#demo2 select').select({ data: data, value: '108,246,247' }); -
自定义选择范围
J('#demo3 select').select({ data: data, root: '0,1,2' });北京市：
-
调用外部JSON （一次取出所有数据，不适合数据量大的情况）
// 由于本人不会动态语言，如果你想使用后台来取数据的话，请参照RayChou的[通用JavaScript联动下拉菜单]中有个php的json数据生成工具 J('#demo4 select').select({ file: 'location.js' });
-
动态加载菜单
// select1函数是地区菜单调用的函数 function select1() { var sel = new J.select({ data: data }); sel.bindSel('#demo5 select'); } // select2函数是自定义菜单调用的函数 function select2() { var sel = new J.select({ data: data1, headTxt: '请选择品牌,请选择车系,请选择车型' }); sel.bindSel('#demo5 select'); } -
Ajax调用数据（根据所选项，动态取下级菜单，速度快，有缓存）
// 由于本人不会动态语言，所以这个示例就不在这里演示了，如果你想看示例请参阅RayChou的[通用JavaScript联动下拉菜单]中的第6个示例。 J('#demo6 select').select({ ajax: './data_builder/ajax.php' });
-
显示所选下拉菜单的值
J('#demo7 select').select({ data: data, field_name: '#selvalue' });
所选择的值是： -
自动显示隐藏选单项
J('#demo8 select').select({ data: data, auto: true });