jQuery自定义下拉框

最新推荐文章于 2022-08-07 13:58:25 发布

置顶 qq_24223679

最新推荐文章于 2022-08-07 13:58:25 发布

阅读量260

点赞数 1

本文链接：https://blog.csdn.net/qq_24223679/article/details/75042811

版权

下拉框的内容比较难从数据库或者自定义数据实现，通过摸索，有一个用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、注意事项

必须在选择框显示完毕后再运行函数，否则不能填充，

qq_24223679

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery自定义下拉框

下拉框的内容比较难从数据库或者自定义数据实现，通过摸索，有一个用jQuery实现的简便方法，留着备查和给别人参考，如有建议或意见，请留言。1、目的：通过参数，方便向选择框提供数据。2、准备条件：（1）、数据源：用对象参数，可以直接写好，也可以从数据库导出；格式示例：[{k:'a',v:'1'},{K:'b',v:'2'},{K:'c',v:'3'},{K:'d',v:'4'},{K:'
复制链接

扫一扫