下拉框的内容比较难从数据库或者自定义数据实现,通过摸索,有一个用jQuery实现的简便方法,留着备查和给别人参考,如有建议或意见,请留言。
1、目的:通过参数,方便向选择框提供数据。
2、准备条件:
(1)、数据源:用对象参数,可以直接写好,也可以从数据库导出;格式示例:[{k:'a',v:'1'},{K:'b',v:'2'},{K:'c',v:'3'},{K:'d',v:'4'},{K:'e',v:'5'},{K:'f',v:'6'},{K:'g',v:'7'}]
(2)、选择框id。用变量传入函数,方便一张表中多个选择框的设定。
3、方法
(1)函数
//选择框函数-开始
//obj:数据;
//selector:选择框id和包括位置
function grid_select(obj,selector)
{
var set="";//初始数据
$.each(obj,function(n,val) { //循环取出。n:对象次数;val:值
set +="<option value='"+val.k+"'>"+val.v+"</option>";//生成option
})
$(selector).after(set);//元素后插入内容。也可以用append(),此时填充区不需要option,用after的目的是为了编辑时保留原值
}
///选择框函数-结束
(2)
//选择的数据
var obj= [{k:'a',v:'1'},{K:'b',v:'2'},{K:'c',v:'3'},{K:'d',v:'4'},{K:'e',v:'5'},{K:'f',v:'6'},{K:'g',v:'7'}];
//选择框id和位置
var selector ="#MySelect option";
//触发函数方法
grid_select(obj,selector);
4、示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="blog.anchen8.net" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title>无标题 6</title>
<script type="text/javascript">
<!--
//选择框函数-开始
//obj:数据;
//selector:选择框id和包括位置
function grid_select(obj,selector)
{
var set="";//初始数据
$.each(obj,function(n,val) { //循环取出。n:对象次数;val:值
set +="<option value='"+val.k+"'>"+val.v+"</option>";//生成option
})
$(selector).after(set);//元素后插入内容。也可以用append(),此时填充区不需要option,用after的目的是为了编辑时保留原值
}
///选择框函数-结束
-->
</script>
</head>
<body>
示例1:<select id="MySelect" ><option value=''>请选择1</option></select><br/>
<!-- 测试多个选择框运行情况--->
示例2:<select id="MySelect" ><option value=''>请选择1</option></select><br/>
<!-- 测试不用选择框运行情况--->
示例3:<select id="MySelect1" ><option value='原数据'>原数据</option></select><br/>
<script type="text/javascript">
<!--
//选择的数据:示例1
var obj= [{k:'a',v:'1'},{K:'b',v:'2'},{K:'c',v:'3'},{K:'d',v:'4'},{K:'e',v:'5'},{K:'f',v:'6'},{K:'g',v:'7'}];
//选择框id和位置
var selector ="#MySelect option";
//触发函数方法
grid_select(obj,selector);
//选择的数据:示例1
var obj1= [{k:'A',v:'01'},{K:'B',v:'02'},{K:'C',v:'03'},{K:'D',v:'04'},{K:'E',v:'05'},{K:'F',v:'06'},{K:'G',v:'07'}];
//选择框id和位置
var selector1 ="#MySelect1 option";
//触发函数方法
grid_select(obj1,selector1);
-->
</script>
</body>
</html>
5、注意事项
必须在选择框显示完毕后再运行函数,否则不能填充,