angularjs 下实现即可通过select选择 也可以通过input输入

题记:本篇文章介绍,一种可以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++";
}




猜你喜欢

转载自blog.csdn.net/u011563903/article/details/49850781