实现方式:EasyUI的combobox控件
实现效果如下:
______
实现过程如下:
下拉框(select):
<select name="jxID" class="easyui-combobox" >
<volist name="type" id="vo">
<option value ="{$vo.SchoolID}" >{$vo.Schoolname}</option>
</volist>
</select>
其中需要引入的头文件是:
<link rel="stylesheet" type="text/css" href="../styles/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../styles/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../styles/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
另:combobox的值需要通过以下方式获取:
$sa = $('#jxID').combobox('getValue');
var jxID = $sa.val();
注:
1)下拉框的数据以volist的方法循环输出,,并且是从数据库中获取的,也可以直接赋值,其中,从数据库中取数据需要在方法里处理,这里就不给出具体方法了。
2)其中easyui的控件不是所有界面都可以使用,同时须得考虑浏览器的兼容性