用Input+Div实现类似Select的效果，定位问题，请教如何处理

感觉默认的Select控件和整体页面风格不搭，所以从网上搜索了好多类似Input+DIV实现Select效果的结构，在试着一点点用Jquery自己做，但一开始就被难住了~如下所示的代码：如果设置绝对定位（Absolute），那么DIV就无法紧靠在Input的下方，如果设置相对定位（Relative），那么这个Input下面所有的内容都会自动拉伸。如果要仿照Select的效果，应该如何修改代码？请各位前辈高手赐教，小弟不胜感激！！！<html>
<head>
<meta charset="utf-8">
<title>房态图-添加</title>
<link rel="stylesheet" href="jquery-ui-1.9.2.custom/css/base/jquery-ui-1.9.2.custom.min.css">
<style>
* {margin:0; padding:0;}
html, body, table {border-width:0; height:100%; width:100%;} 
thead {height:3%;}
tbody {height:95%;}
 
#tdTop {background-color:#D1D1D1;}
#tdTop span {font-size:12px; padding-right:5px;}
#tdNav {background-color:#0065A5; height:95%; text-wrap:none;width:10%; z-index:2;}
#tdPoint {height:100%; width:5px;}
#tdMain {background-color:#ACACD7; height:100%; width:100%; z-index:1; font:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif}
#frmNav {background-color:#0056a5; height:100%; overflow:hidden; visibility:inherit; width:200px;}
 
.navPoint {color:white; cursor: pointer; font-family:Webdings; font-size:16px;}
/*span {border-width:0; padding:0; margin:0;}
*/
.form_title {
    font-size:24px;
    margin:0 0 5px 0;
    text-align:left;
}
.required_notification {
    color:#d45252; 
    /*display:inline;*/
    float:left;
    font-size:14px;
    margin:-5px 5px 0 0; font-weight:bold;
}
 
.FT_form ul {
    text-align:left;
    width:500px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.FT_form li {
    display: block;
    padding:12px; 
    border-bottom:1px solid #ACACD7;
    position:relative;
    width:300px;
    z-index:2;
}
 
.FT_form label {
    display:inline-block;
    float:left;
    font-size:14px;
    margin-top: 0px;
    padding:3px;
    text-align:right;
    width:170px;
}
/*.FT_form input {
    height:30px; 
    width:220px; 
    padding:5px 8px;
    text-align:left;
}
.FT_form textarea {padding:8px; width:220px; text-align:left;}*/
.FT_form button {margin-left:120px;}
 
/*.FT_form li:first-child, .FT_form li:last-child {
    border-bottom:1px solid #777;*/
}
.FT_form input { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    text-align:left;
    vertical-align:middle;
    width:150px;
}
 
.FT_form textarea {
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    text-align:left;
    vertical-align:middle;
    width:250px;
}
.FT_form input:focus, .FT_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}
 
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
}
 
</style>
<script>
 
</script>
<script src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
<script src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="jquery-ui-1.9.2.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script src="jquery/dist/jquery.validate.min.js"></script>
<script src="FJ_select.js"></script>
 
<script language="javascript">
 
//导航栏显示隐藏
function aaa() {
    if (document.getElementById("switchPoint").innerHTML==3) {
        document.getElementById("switchPoint").innerHTML=4;
        document.getElementById("tdNav").style.display="none";
    }
    else {
        document.getElementById("switchPoint").innerHTML=3;
        document.getElementById("tdNav").style.display="";
    }
}
 
//房型和房号，带节奏的二级联动菜单
zcityrun('.zcityGroup');
addItemHtml(1,1);
 
//日期选择器，Jquery控件
$(function(){$("#txt_idate").datepicker();});
 
 
</script>
</head>
<BODY bgcolor=skyblue>
<TABLE border=0 cellPadding=0 cellSpacing=0 >
      <thead>
          <tr>
            <td id="tdTop" name="tdTop" colspan="3" align="right">
                <span id="spLog" name="spLog">当前登录用户：<%=request.Cookies("ftt_uid")%></span>                     
                <span id="spRelog" name="spRelog"><a href="ftt_login.asp">重新登录</a></span>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr> 
              <td align="center" valign="middle" id="tdNav" name="tdNav" nowrap>
                <iframe id="frmNav" name="frmNav" frameborder="0" src="ftt_navLeft.asp"></iframe>
            </td>
            <td name="tdPoint" id="tdPoint" align="center" valign="middle" onClick="aaa();" nowrap>
                    <span class="navPoint" id="switchPoint">3</span>
            </td>
            <td align="center" valign="top" id="tdMain" name="tdMain" nowrap>
                <form class="FT_form" id="frm1" name="frm1" method="post">
                    <ul>
                        <li style="border-bottom:2px solid #808080; width:500px">
                            <h2 class="form_title">新增房态记录</h2>
                            <p class="required_notification">* 为必填项</p>
                        </li>
 
                        <li>
                            <label for="lbl_rtype">* 房型与房号（必选）：</label>
                            <input class="input_ddl" readonly="readonly" style="width: 100px;" value="请选择房型分类" />
                            <div class="div_ddl" style="height:100px; position:relative; overflow-y:auto;border-style:groove;display: none; z-index:3">                            <div class="ul_ddl" style="list-style: none;margin: 0;padding: 0;text-align: center;">
                                        <div class="li_ddl">A1</div>
                                        <div class="li_ddl">A2</div>
                                        <div class="li_ddl">A3</div>
                                        <div class="li_ddl">A4</div>
                                    </div>
                             </div>
                        </li>
                        <li>
                            <label for="lbl_cname">* 客户姓名（必填）：</label>
                            <input type="text" id="txt_cname" name="txt_cname" required />
                            <!--<label for="txt_cname"></label>-->
                        </li>
                        <li>
                            <label for="lbl_cMRN">  MRN编号（选填）：</label>
                            <input type="text" id="txt_cMRN" name="txt_cMRN" required />
                            <!--<label for="txt_cMRN"></label>-->
                        </li>
                        <li>
                            <label for="lbl_action">* 新增项目类别（必填）：</label>
                            <select id="slt_action" name="slt_action">
                                <option>预定</option>
                                <option>入住</option>
                                <option>取消</option>
                            </select>
                        </li>
                        <li>                     
                                   <li>                     
                            <label for="lbl_idate">* 起始日期（必填）：</label>
                            <input type="text" id="txt_idate" name="txt_idate" readonly />
                        </li>
                        <li>
                            <label for="lbl_iperiod">* 期间（必填）：</label>
                            <input type="text" id="txt_iperiod" name="txt_iperiod" />
                        </li>
                        <li style="border-bottom:2px solid #808080; width:500px">
                            <label for="lbl_re">  备注（建议填写）：</label>
                            <textarea id="txt_re" name="txt_re" cols="40" rows="6"></textarea>
                        </li>
                        <li>
                            <button class="submit" type="submit">Update</button>
                        </li>
                    </ul>
                </form>            
            </td>
        </tr>
      </tbody>
</table>
</BODY>
 
</body>
</html>
<script>
    //让选项窗与输入窗等宽
    $(function() {
        $(".div_ddl").css({
            'width': $(".input_ddl").css('width')
        })
    })
             
    $(".input_ddl").click(function() {
    //点击输入框打开选项窗，若已打开则关闭
        if($(".div_ddl").css('display') == 'none') {
 
            $(".div_ddl").show();
            $(".div_ddl").css({
                Left:$(this).offset().left+"px",
                Top: $(this).offset().top+50+"px"
            })
            $('.li_ddl:contains(' + $(this).val() + ')').css('background-color', 'orange')
        } else {
            $(".div_ddl").hide();
        }
    })
         
    $(".li_ddl").click(function() {
    //点击选择时为输入框赋值。并关闭选项窗
        $(".input_ddl").val($(this).text())
        $(".div_ddl").hide();
    })
             
    //为选项设置颜色
    $(".li_ddl").mouseover(function() {
        $('.li_ddl').css('background-color', 'white')
 
</script>

解决方案 »

  1.   

    首先，既然是下拉选项，定位肯定要用绝对定位的，不然选项会占位；
    其次，结构问题<li>
                                <label for="lbl_rtype">* 房型与房号（必选）：</label>
                                <div  style="position:relative;">
                                     <input class="input_ddl" readonly="readonly" style="width: 100px;height:30px" value="请选择房型分类" /><!-- 这里的高度自己定  后面的div top等于input框的高度就可以了-->
                                    <div class="div_ddl" style="height:100px;position:absolute;top:30px; overflow-y:auto;border-style:groove;display: none; z-index:3">                     
                                         <div class="ul_ddl" style="list-style: none;margin: 0;padding: 0;text-align: center;">
                                            <div class="li_ddl">A1</div>
                                            <div class="li_ddl">A2</div>
                                            <div class="li_ddl">A3</div>
                                            <div class="li_ddl">A4</div>
                                        </div>
                                   </div>
                                </div>
                            </li>
      

  2.   

    就用框架来解决吧，简单实用，比如用EasyUI的combobox，一句话就好了
      

  3.   

                            <label for="lbl_rtype">* 房型与房号（必选）：</label>
    <div style="display: inline-block; position: relative;">
                                <input class="input_ddl" readonly="readonly" style="width: 100px;" value="请选择房型分类" />
                                <div class="div_ddl" style="height:100px; top: 100%; position: absolute; overflow-y:auto;border-style:groove;display: none; z-index:3">
                                    <div class="ul_ddl" style="list-style: none;margin: 0;padding: 0;text-align: center;">
                                            <div class="li_ddl">A1</div>
                                            <div class="li_ddl">A2</div>
                                            <div class="li_ddl">A3</div>
                                            <div class="li_ddl">A4</div>
                                        </div>
                                 </div>
    </div>
    用这种定位方式就不需要再用js代码设置Left 和 Top了    $(".input_ddl").click(function() {
        //点击输入框打开选项窗，若已打开则关闭
            if($(".div_ddl").css('display') == 'none') {
                $(".div_ddl").show();
                $('.li_ddl:contains(' + $(this).val() + ')').css('background-color', 'orange')
            } else {
                $(".div_ddl").hide();
            }
        })
      

  4.   


    感谢前辈指教，现在下拉层定位的问题已经解决了！！！另有问题请教。其一，作为初学者，能否请前辈指点下 inline-block属性具体如何应用？还有 top:100% 也不太明白；第二就是下拉层现在是这样的，如下图所示，无法浮动在input等元素之上，请指点则个，不胜感激！
      

  5.   

    inline-block 是行内块元素，有行内元素的特性，元素前后不会换行，又可以像块元素一样设置高度，并且元素内可以是多行文本。
    top:100%是元素的顶部位于有设置了position的父元素内的100%高度的位置，也就是子元素的顶部与父元素的底部对齐。无法浮动在input等元素之上的问题，为relative的元素设置一个比较大的 z-index 即可
    <div style="display: inline-block; position: relative; z-index: 9999;">
      

  6.   

    多谢前辈指点，这个显示效果现在可以实现了。还得冒昧请教一下，如果我想要实现，在这个页面的其它区域点击时，模拟下拉效果的DIV消失隐藏（类似于Select的效果），应如何在jquery中写？ 网上查到的代码实话说看不明白，照猫画虎添加到页面上，也不生效……所以还得请教一下前辈，谢谢～
      

  7.   

                            <label for="lbl_rtype">* 房型与房号（必选）：</label>
    <div id="selbox" style="display: inline-block; position: relative;">
                                <input class="input_ddl" readonly="readonly" style="width: 100px;" value="请选择房型分类" />
                                <div class="div_ddl" style="height:100px; top: 100%; width: 95px; position: absolute; overflow-y:auto; background-color: #999; border-style:groove;display: none; z-index:3">
                                    <div class="ul_ddl" style="list-style: none;margin: 0;padding: 0;text-align: center;">
                                            <div class="li_ddl">A1</div>
                                            <div class="li_ddl">A2</div>
                                            <div class="li_ddl">A3</div>
                                            <div class="li_ddl">A4</div>
                                        </div>
                                 </div>
    </div>
    <script type="text/javascript">
        $(".input_ddl").click(function() {
        //点击输入框打开选项窗，若已打开则关闭
            if($(".div_ddl").css('display') == 'none') {
                $(".div_ddl").show();
                $('.li_ddl:contains(' + $(this).val() + ')').css('background-color', 'orange')
            } else {
                $(".div_ddl").hide();
            }
        });
        $("#selbox").click(false);//停止事件冒泡
        $(document).click(function(event){
        $(".div_ddl").hide();
        });
    </script>
      

  8.   

    第二种方法    $(".input_ddl").blur(function(event){
        setTimeout(function(){
                $(".div_ddl").hide();
        }, 500);
        });