一款好看的可以插入图片的下拉控件

最新推荐文章于 2022-09-17 16:22:13 发布

刀剑分天下

最新推荐文章于 2022-09-17 16:22:13 发布

阅读量1.1k

点赞数

分类专栏： JQuery 文章标签： jQuery

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用jQuery.ddslick插件创建一个带有图片和描述的下拉选择框。需要注意的是，对于不同版本的jQuery，该插件可能表现不一致；另外，当选项描述为空时，样式可能会出现问题。

<!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>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.ddslick.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function () {
            var ddlData = [
                 {
                     text: "Lwolf",
                     value: 1,
                     selected: false,
                     description: "描述",
                     imageSrc: "/Content/image/1_f.gif"
                 },
                 {
                     text: "Site518",
                     value: 2,
                     selected: true,
                     description: "",
                     imageSrc: "/Content/image/2_f.gif"
                 }
            ];
            alert(ddlData);
            $('#mydropdown').ddslick({
                data: ddlData,
                width: 150,
                showSelectedHTML:true,
                selectText: "请选择...",
                imagePosition: "left",
                onSelected: function (selectedData) {
                    //回调方法
                }
            });
 
        })
    </script>
</head>
<body>
<div id="mydropdown"></div>
</body>
</html>

使用这个控件，需要先引用一下jquery。不知道他对jquery版本是否有要求，我引用1.4.4的时候，这个控件无法运行，引用1.7.2就可以。

基本就这样，很简单，不过有一点就是：如果在使用的过程中不需要那个json里面的描述，可以为空，但是这样写以后好像样式有一点问题

会显示成这样：