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来定位。