input和select同时使用

今天做一个项目中用到很多select,但是产品经理让制定的select可以用户输入
首先想到的是1,用模拟select来实现
2,就是不常用的clip属性来实现

1,第一种很常用的就是模拟select

<div class="select_box">
    <p><span class="select_input">请选择</span><span class="select_tip"></span></p>
    <ul class="select_ul" style="display:none">
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
        <li>选项四</li>
    </ul>
</div>
如这些,加上一些点击的js效果就可以了

 2,我主要想说的是用clip来剪切显示部分,隐藏部分用input tpye=“text” 来填补。

这样可以想想,select点击的三角形显示出来可以点击出来select的下拉菜单
如代码

<div class="my_select">
            <select class="my_select_select" id="my_select_select01">
                <option value="1_1" selected>1_1</option>
                <option value="1_2">1_2</option>
                <option value="1_3">1_3</option>
            </select>
            <input class="my_select_text" id="my_select_text01" />
        </div>
        <div class="my_select">
            <select class="my_select_select" id="my_select_select02">
                <option value="1_1" selected>1_1</option>
                <option value="1_2">1_2</option>
                <option value="1_3">1_3</option>
            </select>
            <input class="my_select_text" id="my_select_text02" />
        </div>

 

<style type="text/css">
            .my_select {
                position:relative;
                margin:100px;
                font-size:12px;
            }
            .my_select_select {
                position:absolute; left:0; top:0; *top:1px;
                width:100px;
                clip:rect(0 auto auto 80px);
                height:22px; line-height:18px;
            }
            .my_select_text {
                width:80px; *height:16px; *line-height:16px;
            }
        </style>

 

<script type="text/javascript">
            $(function(){
                $(".my_select_select").change(function(){
                    var id = $(this).attr('id');
                    var num = id.substr(id.length - 2, 2);
                    $("#my_select_text" + num).val($(this).val());
                });
            });
        </script>

 jquery中,主要是找到点击的当前的select然后把值赋给他的input

页面中有很多个这样的可输入的select的话,为了能找到当前所点击的
select,所以用到了01.02来定位。

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值