新版带下拉菜单的输入框

之前的案例：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

  愤怒