新版带下拉菜单的输入框

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2012-06-07   阅读次数: 820   查看权限: 游客查看

因工作需要,再次制作带下拉菜单的输入框

之前的案例:http://www.scscms.com/article/2011-10/182187201.html

<div class="div"><label>禁止输入下拉</label>
    <a href="javascript:void(0)" class="select_a" date="#company_list,company">
        <input type="text" class="select_input" value="请选择保险公司" readonly="readonly" />
        <input type="hidden" name="company" value="" />
        <ul class="select_ul_list" id="company_list">
            <li value="">请选择保险公司</li>
            <li value="1">中国人寿保险</li>
            <li value="2">中国平安人寿</li>
            <li value="3">中国太平洋人寿</li>
            <li value="4">太平人寿</li>
            <li value="5">泰康人寿</li>
            <li value="6">生命人寿</li>
            <li value="7">中宏人寿</li>
            <li value="8">新华人寿</li>
            <li value="9">太平洋安泰人寿</li>
        </ul>
    </a>
</div>
<div class="div"><label>可输入下拉</label>
    <a href="javascript:void(0)" class="select_a" date="#input_list,input">
        <input type="text" class="select_input" value="请选择保险公司" />
        <input type="hidden" name="input" value="" />
        <ul class="select_ul_list" id="input_list">
            <li value="">请选择保险公司</li>
            <li value="1">中国人寿保险</li>
            <li value="2">中国平安人寿</li>
            <li value="3">中国太平洋人寿</li>
            <li value="4">太平人寿</li>
            <li value="5">泰康人寿</li>
            <li value="6">生命人寿</li>
            <li value="7">中宏人寿</li>
            <li value="8">新华人寿</li>
            <li value="9">太平洋安泰人寿</li>
        </ul>
    </a>
</div>
<div class="div"><label>不另赋值下拉</label>
    <a href="javascript:void(0)" class="select_a" date="#notv_list">
        <input type="text" class="select_input" value="请选择保险公司" readonly="readonly" />
        <ul class="select_ul_list" id="notv_list">
            <li>请选择保险公司</li>
            <li>中国人寿保险</li>
            <li>中国平安人寿</li>
            <li>中国太平洋人寿</li>
            <li>太平人寿</li>
            <li>泰康人寿</li>
            <li>生命人寿</li>
            <li>中宏人寿</li>
            <li>新华人寿</li>
            <li>太平洋安泰人寿</li>
        </ul>
    </a>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
    select_input("a","date");
});
//下拉输入框架
function select_input(tag,nature){
    $(tag+"["+nature+"]").each(function(i,item){
        var a_attr=$(item).attr(nature).split(",");
        var _this=$(this);
        var o_select=a_attr[0];
        var t_name  =a_attr[1];
        var i_width=_this.width()+2;
        var i_w=$(o_select).width();
        i_width=i_width>i_w?i_width:i_w;
        $(o_select).css({width:i_width,left:"-1px",display:"none"});
        _this.keyup(function(){
            var v=$(this).find("input.select_input").val();
            if(v==""){
                $(o_select+" li").show();
            }else{
                $(o_select+" li").hide();
                $(o_select+" li:contains('"+v+"')").show();
            }
        });
        _this.click(function(e){
            $(this).blur();
            $(".select_ul_list").hide();
            $(".select_a").css("z-index",10);
            $(this).css("z-index",11);
            $(o_select+" li").show();
            $(o_select).fadeIn();
            e.stopPropagation();
        });
        $(o_select+" li").click(function(e){
            _this.find("input.select_input").val($(this).text());
            if(t_name!=""){
                _this.find("input[name='"+t_name+"']").val($(this).val());
            }
            $(o_select).fadeOut();
            e.stopPropagation();
        });
        $(document).click(function(){
            $(".select_ul_list").fadeOut();
        });
        $(".select_ul_list li").hover(function(){
            $(this).addClass("on_select_ul_li");
        },function(){
            $(this).removeClass();
        });
    });
}
</script>

本次主要是通过编写javascript代码把ul li内容充当下拉列表,具有兼容性好美观的效果,调用简单。查看效果:狠狠点击这里

关键词: input,输入框,下拉菜单   编辑时间: 2012-07-20

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    1

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有2 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 【管理员_太阳光】
    引用 游客 的评论:哥们,把你的样式也拿出来看看呗!!!或者把这部分完整代码发一份给我,谢谢!!!
    你查看演示时查看源代码即可。 [2013-08-20 22:42:17]
  • 【游客】哥们,把你的样式也拿出来看看呗!!!或者把这部分完整代码发一份给我,谢谢!!! [2013-07-03 11:46:33]
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐