可编辑下拉列表
2016-11-18 本文已影响90人
JasonQiao
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.con {
width:400px;
height:50px;
padding:0;
margin:0;
border:1px solid #f60;
position:relative;
}
.select { position:absolute; left:0; top:0; height:50px; width:400px; border:0; outline:none;}
.editbox { position:absolute; left:0; top:0; height:50px; width:350px; border:0; padding:0; outline:none;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
::-ms-clear{display: none;}
::-ms-reveal{display: none;}
.tip { width:50px; border:1px solid #ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px; display:none;}
</style>
</head>
<body>
<p>请选择项目：</p>
<div class="con">
<select name="select" id="select" class="select">
<option>18866669999</option>
<option>18877779999</option>
<option>18888889999</option>
<option>其他</option>
</select>
<input class="editbox" type="text" value="编辑框" />
</div>
<div class="tip">看看谁能把我挡着</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$("select").change(function(){
var v = $(this).children('option:selected').val();
if(v == '其他'){
$(".editbox").val('').prop('readonly', false);
} else {
$(".editbox").val(v).prop('readonly', true).prop('placeholder','请输入新的手机号');
}
});
</script>
</body>
</html>
使用列表实现的下拉菜单
JS改变input的值触发方法参考http://blog.csdn.net/zhbitxhd/article/details/12943091
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟Select效果</title>
</head>
<body>
<style>
ul,li{list-style-type:none;padding:0;margin:0;}
.select{width:200px;height:22px;line-height:22px;border:1px solid #dcdcdc;}
#text_left{
display:block;
width:180px;
height:22px;
line-height:22px;
float:left;
margin:0;
padding:0 5px;
border:0;
outline:none;
font-size:14px;
}
#arrow_right{
display:block;
border-color:#FF6600 #FFFFFF #FFFFFF #FFFFFF;
border-style: solid;
border-width: 4px;
display: block;
font-size: 0;
height: 0;
line-height: 0;
width: 0;
float:left;margin-top:8px;
cursor:pointer;
}
.list{width:200px;border:1px solid #dcdcdc;border-top:0;display:none;}
.list li{line-height:24px;padding:0 5px;font-size:14px;}
.list li:hover{background:#F8F3F4;cursor:pointer;}
</style>
<div class="select">
<input id="text_left" value="新浪新闻" readonly />
<span id="arrow_right"></span>
</div>
<ul class="list">
<li>新浪新闻</li>
<li>腾讯门户</li>
<li>凤凰影视</li>
<li data-edit=1>请输入…</li>
</ul>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#arrow_right').click(function(e){
$('.list').toggle();
e.stopPropagation();
$('body').click(function(){
$('.list').hide();
});
});
$('.list li').click(function(){
if($(this).data('edit')){
$('#text_left').prop('readonly', false).val('').prop('placeholder','请输入…');
} else {
$('#text_left').prop('readonly', true).val($(this).text());
}
});
if(/msie|trident/.test(navigator.userAgent.toLowerCase())) { // IE浏览器 Edge浏览器
$('.select>input').bind('blur', function(){
alert($(this).val());
});
} else {
$('.select>input').bind('blur', function(){
console.log($(this).val());
});
}
});
</script>
</body>
</html>
