`

jquery实现自定义select表单

 
阅读更多

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">       
        #userselect{  position:relative; width:183px;}
        #userselect span{ display:block;text-align:left; padding-left:5px;width:178px; height:31px;border:1px solid #CCC; line-height:31px; background:url("selectdot.gif") no-repeat right top; cursor:pointer;}
        #userselect ul{ position:absolute; left:0; top:33px; border:1px solid #CCC; margin:0; padding:0; list-style:none; width:100%;}
        #userselect li{text-align:left;margin:0; padding:0; padding-left:5px; list-style:none;cursor:pointer; line-height:24px; width:178px; background:#FFF;}
        #userselect li.hover{ color:#579BC3; background:#F2F2F2;}
       
    </style>
    <script type="text/javascript" src="tk.userselect.js"></script>   
</head>
<body>

<div id="userselect"></div>
<script type="text/javascript">
    var datatest = {
        defaulttex: "--请选择--",
        selectname: "usersex", //slect表单name名
        selectvalue: "0", //slect表单value值
        data: [{
            optionstext: "男",
            values: "1"
            },
            {
                optionstext: "女",
                values: "2"
            }]
    };
    $("#userselect").userselect(datatest);
    </script>
</body>
</html>

 

 

 

//tk.userselect.js代码：

// JScript source code
/*
例子:
var datatest={
defaulttex: "---请选择---",
selectname: "userselect",//slect表单name名
selectvalue: "0",//slect表单value值
data: [{
optionstext: "下拉列表1",
values: "1"
},
{
optionstext: "下拉列表2",
values: "2"
}]

};
$("aaa").userselect(datatest);

*/
(function ($) {
    //初始化select
    var defaults = {
        defaulttex: "---请选择---",
        selectname: "userselect",
        selectvalue: "0",
        data: [{
            optionstext: "下拉列表1",
            values: "1"
        },
        {
            optionstext: "下拉列表2",
            values: "2"
        }]

    };

    $.fn.extend({
        userselect: function (options) {
            var selectdata = $.extend({}, defaults, options);
            _intselect(this, selectdata);
        }
    });

    _intselect = function (selectid, mydata) {

        var selecthtml = '<input name="' + mydata.selectname + '" type="hidden" data-value="' + mydata.defaulttex + '" value="' + mydata.selectvalue + '" /><span></span><ul style="display:none;">'
        for (var i = 0; i < mydata.data.length; i++) {
            selecthtml += '<li data-option="' + mydata.data[i].values + '">' + mydata.data[i].optionstext + '</li>';
        }
        selecthtml += '</ul>';
        selectid.append(selecthtml);
        selectid.children("span").text(selectid.children("input").attr("data-value"));

        selectid.children("span").bind("click", function (event) {
            selectid.children("ul").toggle();
            event.stopPropagation();
        });
        $(document).bind("click", function () {
            selectid.children("ul").hide();
        });

        selectid.children("ul").children().each(function (i) {
            $(this).bind("click", function () {
                selectid.children("span").text($(this).text());
                selectid.children("input").val($(this).attr("data-option"));
                selectid.children("input").attr("data-value", $(this).text());
                //alert(selectid.children("input").val());
            });
            $(this).hover(function () {
                $(this).addClass("hover");
            },
              function () {
                  $(this).removeClass("hover");
              }
            );

        });
    }

})(jQuery);

分享到：
| jquery实现图片幻灯片切换代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 自定义select控件

    二、jQuery自定义Select控件的实现步骤 1. 隐藏原生Select：首先，我们需要隐藏原生的Select元素，使用CSS的`display:none`属性，确保它不会在页面上显示。 ```html &lt;select id="custom-select" style="display:...

    jQuery inputbox表单美化插件自定义select框

    "jQuery inputbox表单美化插件自定义select框"是一个专注于改善select下拉框外观的解决方案。这个插件利用jQuery的强大功能，为传统的HTML select元素提供了自定义样式和交互效果，让表单看起来更加专业且用户友好。...

    jquery+html自定义select下拉框，下拉框美化

    不过，由于`&lt;select&gt;`元素的限制，我们需要使用jQuery来实现更复杂的行为，如打开和关闭下拉菜单、处理用户交互等。这里的关键是使用jQuery的事件监听器（如`click`、`mouseover`）和DOM操作方法（如`addClass`、`...

    jquery自定义select下拉样式.zip

    "jquery自定义select下拉样式.zip"这个压缩包可能包含了实现这一目标的示例代码和资源。 首先，我们需要理解jQuery的基本用法。jQuery通过$函数作为入口，可以快速选择DOM元素，如`$('select')`用于选取所有的...

    jquery div模拟select表单地区选择三级联动美化效果

    二、模拟select表单 在HTML5中，虽然 `&lt;select&gt;` 元素提供了下拉菜单功能，但其样式控制有限，且无法实现复杂的交互。使用jQuery，我们可以创建自定义的HTML结构（如`&lt;div&gt;`）来模拟这种选择行为。这包括创建可点击...

    jQuery自定义Select下拉框 可自动滚动

    今天我们要分享一款很实用的jQuery自定义Select下拉框，它的外观不仅比浏览器自带的下拉框要漂亮，而且在选择的时候还可以自动滚动下拉框选项，用户体验非常不错。之前我们也分享过一些用CSS3和HTML5制作的下拉框，...

    jquery自定义表单控件.zip

    总结来说，"jquery自定义表单控件.zip"中的内容将涵盖使用jQuery进行表单元素的选取、事件绑定、样式控制、自定义功能实现以及与服务器的异步通信等多个方面，帮助开发者打造功能丰富、交互性强的表单控件。...

    jQuery select框美化自定义下拉菜单选择表单代码

    jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码

    jquery.editable-select

    4. **API 和事件**：`jquery.editable-select` 提供了一系列 API 方法和事件，允许开发者自定义其行为。例如，你可以通过 API 设置或获取选中项，监听用户输入或选择变化的事件，甚至可以添加或移除选项。 5. **...

    jQuery实现的select下拉框多选菜单效果插件.zip

    《jQuery实现的Select下拉框多选菜单效果插件详解》 在网页开发中，Select下拉框是我们经常遇到的一种表单元素，用于提供用户选择的选项。然而，原生的Select下拉框功能较为单一，无法满足一些复杂的交互需求，如...

    Bootstrap响应式自定义创建表单项代码.zip

    在"jQuery自定义创建表单项代码"中，我们可以预见到这个压缩包包含了使用jQuery库来增强和实现动态表单创建的功能。jQuery是一个轻量级、高性能的JavaScript库，简化了DOM操作、事件处理和动画效果，极大地提高了...

    自定义表单的实现源代码

    以下是对自定义表单实现过程和原理的详细说明： 一、表单基础 表单（Form）是HTML中的一个重要元素，用于获取用户输入并提交数据到服务器。一个基本的HTML表单包含`&lt;form&gt;`标签，其中可以嵌套`&lt;input&gt;`、`...

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中，使得传统的单选...

    jQuery自定义时间段特效拖动设置时间段表单提交

    总的来说，jQuery自定义时间段特效拖动设置是一个涉及前端交互设计、事件处理和表单提交的综合任务。通过合理地组织HTML结构、运用CSS样式以及利用jQuery提供的功能，我们可以构建出一个高效且用户友好的时间段选择...

    jQuery插件 stylish-select 完全自定义的select下拉列表.zip

    这时，jQuery插件`stylish-select`应运而生，它为开发者提供了完全自定义select下拉列表的解决方案。 `stylish-select`是一款基于jQuery的插件，旨在让开发者能够轻松地为select元素添加个性化的外观和交互效果。这...

    jQuery multiple-select-master 插件

    此时，jQuery multiple-select-master插件就显得尤为重要，它为开发者提供了丰富的自定义选项和美观的界面，极大地提升了用户体验。 一、jQuery multiple-select-master插件简介 jQuery multiple-select-master是...

    JQuery插件searchSelect

    searchSelect插件常用于大型项目中，如在线表单、用户设置、过滤选择等场景，提升用户在大量数据中选择的效率。结合其他前端框架，如Bootstrap，可以使界面更加美观且功能强大。 **六、注意事项** 1. 确保select...

    jQuery实现的select下拉框点击国家选择功能插件源码.zip

    本插件源码的核心是利用jQuery来实现一个动态的、交互式的国家选择功能，常用于网页表单，特别是涉及国际化的场景。 标题中的"jQuery实现的select下拉框点击国家选择功能插件源码"表明这个压缩包包含了一段用jQuery...

    jQuery自定义表单选择框效果改变平淡无奇的下拉列表.zip

    "jQuery自定义表单选择框效果改变平淡无奇的下拉列表.zip"这个资源提供了一种方法，通过jQuery技术让传统的下拉列表变得生动有趣。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、...

Magicbox
Global site tag (gtag.js) - Google Analytics