题记:本篇文章介绍,一种可以select选择输入,也可以input,主要原理就是把input输入框覆盖select,并且在选择select后,把值赋值给input
1 参考demo 普通js
<html>
<head>
<title>可输入的select下拉框</title>
</head>
<script language="javascript">
function changeF()
{
document.getElementById('makeupCo').value=
document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
console.log(document.getElementById('makeupCo').value);
}
</script>
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;
height:19px;clip:rect(-1px 190px 190px 170px);">
<select name="makeupCoSe" id="makeupCoSe" style="width:190px;height:20px;margin:-2px;" onchange="changeF();">
<option id='1' value='java'>java</option>
<option id='2' value='c++'>c++</option>
<option id='3' value='python'>python</option>
<OPTION id="99999" VALUE="" SELECTED>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt
solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
<input type="text" name="makeupCo" id="makeupCo" value="请选择或输入" style="width:170px;height:15px;border:0pt;">
</span>
</body>
</html>
2 angularjs下实现
html部分:
<!DOCTYPE html>
<html>
<head>
<title>first angular-1.3</title>
</head>
<body>
<div ng-controller="HelloAngular" ng-app>
<p>{{greeting.text}},Angular</p>
<!-- <span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;
height:19px;clip:rect(-1px 190px 190px 170px);"> -->
<select name="demoSelect" id="demoSelect" style="width:190px;height:20px;margin:-2px;" ng-model="selectone" ng-change="fu()">
<option value="c++">c++</option>
<option value="Java">Java</option>
<option value="Html">Html</option>
<option value="Js">Js</option>
</select>
</span>
<input type="text" name="inputSelect" id="inputSelect" value="please choose get CM or input" style="position:relative;margin-left:-190px;width:170px;height:15px;border:0pt;">
</div>
</body>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script type="text/javascript" src="HelloAngular_MVC.js"></script>
</html>
js部分:
$scope.selectone="c++";这个一定要写,否则会出现一个空行
function HelloAngular($scope){
$scope.greeting = {
text: 'Hello'
};
$scope.fu = function(){
console.log($scope.selectone);
document.getElementById("inputSelect").value=$scope.selectone;
console.log(document.getElementById("inputSelect").value);
}
$scope.selectone="c++";
}