87,993
社区成员
发帖
与我相关
我的任务
分享用Input+Div实现类似Select的效果，定位问题，请教如何处理
感觉默认的Select控件和整体页面风格不搭，所以从网上搜索了好多类似Input+DIV实现Select效果的结构，在试着一点点用Jquery自己做，但一开始就被难住了~
如下所示的代码：如果设置绝对定位（Absolute），那么DIV就无法紧靠在Input的下方，如果设置相对定位（Relative），那么这个Input下面所有的内容都会自动拉伸。如果要仿照Select的效果，应该如何修改代码？请各位前辈高手赐教，小弟不胜感激！！！
如下所示的代码：如果设置绝对定位（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_remark"> 备注（建议填写）：</label>
<textarea id="txt_remark" name="txt_remark" 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>
...全文
请发表友善的回复…
发表回复
天际的海浪 2018-12-15
- 打赏
- 举报
第二种方法
$(".input_ddl").blur(function(event){
setTimeout(function(){
$(".div_ddl").hide();
}, 500);
});
天际的海浪 2018-12-15
- 打赏
- 举报
<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>
sspanzervor1 2018-12-15
- 打赏
- 举报
多谢前辈指点，这个显示效果现在可以实现了。
还得冒昧请教一下，如果我想要实现，在这个页面的其它区域点击时，模拟下拉效果的DIV消失隐藏（类似于Select的效果），应如何在jquery中写？ 网上查到的代码实话说看不明白，照猫画虎添加到页面上，也不生效……所以还得请教一下前辈，谢谢～
天际的海浪 2018-12-14
- 打赏
- 举报
inline-block 是行内块元素，有行内元素的特性，元素前后不会换行，又可以像块元素一样设置高度，并且元素内可以是多行文本。
top:100%是元素的顶部位于有设置了position的父元素内的100%高度的位置，也就是子元素的顶部与父元素的底部对齐。
无法浮动在input等元素之上的问题，为relative的元素设置一个比较大的 z-index 即可
<div style="display: inline-block; position: relative; z-index: 9999;">
sspanzervor1 2018-12-14
- 打赏
- 举报
感谢前辈指教，现在下拉层定位的问题已经解决了！！！
另有问题请教。其一，作为初学者，能否请前辈指点下 inline-block属性具体如何应用？还有 top:100% 也不太明白；
第二就是下拉层现在是这样的，如下图所示，无法浮动在input等元素之上，请指点则个，不胜感激！
天际的海浪 2018-12-13
- 打赏
- 举报
<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>
$(".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();
}
})
Hello World, 2018-12-13
- 打赏
- 举报
就用框架来解决吧，简单实用，比如用EasyUI的combobox，一句话就好了
sspanzervor1 2018-12-13
- 打赏
- 举报
不行啊，还是没法定位
風灬雲 2018-12-13
- 打赏
- 举报
首先，既然是下拉选项，定位肯定要用绝对定位的，不然选项会占位；
其次，结构问题
<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>
