<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>jQuery实现下拉列表</title>
<style>
*{margin: 0;padding: 0;}
body{font-family: "Microsoft YaHei","微软雅黑", helvetica, arial, verdana, tahoma, sans-serif; background:#fff; max-width: 640px; margin: 40px auto;}
ul,li{list-style: none;}
a{display: block;text-decoration: none;color: #656565;}
.field-position{border: 1px solid #ccc;height: 40px;}
.field-position .form-control{border: none;height: 40px;width: 89%;padding: 0 10px;color: #656565;}
.field-countrys{width: 638px;border: 1px solid #ccc;border-top: 0px;border-bottom: 0px;position: absolute;z-index: 1;background: #ffffff;}
.field-countrys ul li{padding-top: 4px;padding-bottom: 3px;border-bottom: 1px solid #ccc;padding: 10px;}
.position-chosez{position: absolute;right: 480px;top: 41px;width: 50px;height: 41px;line-height: 33px;text-align: center;border-left: 1px solid #ccc;}
.position-choses{height: 40px;position: absolute;width: 640px;top: 40px;}
</style>
</head>
<body>
<div class="field-position">
<input type="text" id="chose_input" class="form-control" placeholder="Please select" />
<div class="position-chosez"><img class="jt_xz" width="20" src="images/jtx.png" alt="" /></div>
<div id="position-chose" class="position-choses"></div>
</div>
<div class="field-countrys" style="display: none">
<ul>
<li class="hotBank-list">
<a href="javascript:" class="field-country " title="China">China</a>
</li>
<li class="hotBank-list">
<a href="javascript:" class="field-country " title="America">America</a>
</li>
</ul>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$(".field-country").bind('click', function() {
$('#chose_input').val($(this).attr('title'));
$('.field-countrys').hide();
});
$("#position-chose").click(function() {
$('.field-countrys').show();
});
})
</script>
</body>
</html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>jQuery实现下拉列表</title>
<style>
*{margin: 0;padding: 0;}
body{font-family: "Microsoft YaHei","微软雅黑", helvetica, arial, verdana, tahoma, sans-serif; background:#fff; max-width: 640px; margin: 40px auto;}
ul,li{list-style: none;}
a{display: block;text-decoration: none;color: #656565;}
.field-position{border: 1px solid #ccc;height: 40px;}
.field-position .form-control{border: none;height: 40px;width: 89%;padding: 0 10px;color: #656565;}
.field-countrys{width: 638px;border: 1px solid #ccc;border-top: 0px;border-bottom: 0px;position: absolute;z-index: 1;background: #ffffff;}
.field-countrys ul li{padding-top: 4px;padding-bottom: 3px;border-bottom: 1px solid #ccc;padding: 10px;}
.position-chosez{position: absolute;right: 480px;top: 41px;width: 50px;height: 41px;line-height: 33px;text-align: center;border-left: 1px solid #ccc;}
.position-choses{height: 40px;position: absolute;width: 640px;top: 40px;}
</style>
</head>
<body>
<div class="field-position">
<input type="text" id="chose_input" class="form-control" placeholder="Please select" />
<div class="position-chosez"><img class="jt_xz" width="20" src="images/jtx.png" alt="" /></div>
<div id="position-chose" class="position-choses"></div>
</div>
<div class="field-countrys" style="display: none">
<ul>
<li class="hotBank-list">
<a href="javascript:" class="field-country " title="China">China</a>
</li>
<li class="hotBank-list">
<a href="javascript:" class="field-country " title="America">America</a>
</li>
</ul>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$(".field-country").bind('click', function() {
$('#chose_input').val($(this).attr('title'));
$('.field-countrys').hide();
});
$("#position-chose").click(function() {
$('.field-countrys').show();
});
})
</script>
</body>
</html>
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
