<!DOCTYPE html>
<html>
<head>
<title>下拉</title>
<style type="text/css">
#input{
100px;
height: 20px;
position: absolute;
top: 10px;
left: 100px;
border: 2px solid #ccc;
}
#choose{
100px;
height: auto;
position: absolute;
top: 18px;
left: 60px;
display: none;
}
#choose li{
100px;
height: 20px;
line-height: 20px;
text-align: center;
list-style: none;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<input id="input" type="text" name="">
<ul id="choose">
<li>1</li>
<li>10</li>
<li>100</li>
</ul>
<script src="https://code.jquery.com/jquery-git.js"></script>
<script>
$('#input').click(function(){
$('#choose').show();
$('#choose li').click(function(){
var value = $(this)[0].innerHTML;
$('#input').val(value);
$('#choose').hide();
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>下拉</title>
<style type="text/css">
#input{
100px;
height: 20px;
position: absolute;
top: 10px;
left: 100px;
border: 2px solid #ccc;
}
#choose{
100px;
height: auto;
position: absolute;
top: 18px;
left: 60px;
display: none;
}
#choose li{
100px;
height: 20px;
line-height: 20px;
text-align: center;
list-style: none;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<input id="input" type="text" name="">
<ul id="choose">
<li>1</li>
<li>10</li>
<li>100</li>
</ul>
<script>
var objInput = document.getElementById("input");
objInput.addEventListener("click",function () {
console.log("click");
var obj=document.getElementById("choose");
obj.style.display="block";
var inputs=obj.getElementsByTagName('li');
console.log(inputs);
for (var i = 0; i <inputs.length; i++) {
inputs[i].addEventListener("click",function(i){
console.log(i);
objInput.value=i.path[0].innerHTML;
obj.style.display="none";
});
}
});
</script>
</body>
</html>