angularJS 可编辑下拉选项框
功能介绍：
该组件将文本框和下拉框的组合，当你点击最右边的下拉按钮,实现下拉框选择的功能；当你选中文本框，实现文本框输入的功能。将文本框和下拉框设置name属性一样他自动会把对应下拉框的值传入后台，而文本框的值不传，当你做文本框使用，它会把文本框的值传入后台而下拉框的值不传。
可编辑下拉选项框
1.html代码
1 <!DOCTYPE html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>可编辑下拉选项框</title> 6 <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script> 7 <script src="../js/edit_sel.js" type="text/javascript" charset="utf-8"></script> 8 <link rel="stylesheet" type="text/css" href="edit_sel.css"/> 9 </head> 10 11 <body ng-controller="mycon"> 12 <select class="sel" name="search" ng-focus="foChange(flt1)" ng-model="flt1" ng-change="ftl1Change(flt1)" ng-focus="foc"> 13 <option value=""></option> 14 <option value="ANY">ANY</option> 15 <option value="1" style="display: none;">1</option> 16 </select>* 17 <input class="inp" maxlength="4" type="text" required="required" 18 ng-blur="chkNumber(fltNo1)" ng-model="fltNo1" ng-change="fltNo1Change(fltNo1)" /> 19 <font color="red"> *</font> 20 <span ng-model="tips"> {{tips}}</span> 21 </body> 22 </html>
2.css样式引入
1 .sel{ 2 width: 1.5%; 3 position: relative; 4 left: 11.5%; 5 height:21px; 6 } 7 8 .inp{ 9 width: 10%; 10 position: relative; 11 left: -20px; 12 }
3.可编辑文本框下拉选项的js代码实现
angular.module("myapp",[]).controller("mycon",function($scope){
var vm = $scope;
// 下拉框change事件
$scope.ftl1Change= function(flt1){
// console.log(flt1);
if(vm.flt1===""||vm.flt1==null){
vm.fltNo1="";
}else{
vm.fltNo1="ANY";
}
};
// 文本框输入 change事件
$scope.fltNo1Change = function(fltNo1){
vm.flt1 = fltNo1;
};
// 下拉框focus事件
vm.foChange = function(flt1){
vm.flt1 = "1";
};
// 校验是是否输入数据合法
$scope.chkNumber=function(eleText){
var value =eleText;
for(var i=0;i<value.length;i++)
{
if(value.charAt(i)>"9"|| value.charAt(i)<"0")
{
vm.tips="输入非法字符！";
eleText.focus();
break;
}
}
};
});
/*
// html 原生的onblur事件校验
<input type="text" id="d1" onblur=" chkNumber(this)"/>
function chkNumber(eleText)
{
var value =eleText.value;
var len =value.length;
for(var i=0;i<len;i++)
{
if(value.charAt(i)>"9"|| value.charAt(i)<"0")
{
alert("含有非数字字符");
eleText.focus();
break;
}
}
}
*/
使用原生jquery实现 可编辑下拉选项框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可编辑下拉选项框</title>
<script src="../../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
select{position: relative;left: -0.5em;height: 1.6em;border: 2px solid darkgray;}
input{border: 2px solid darkgray;}
</style>
<script type="text/javascript">
$(document).ready(function(){
// 获得鼠标的事件：改变颜色
$("#sel-age").mouseover(function(){
$(this).css("background-color","palegreen");
});
// 鼠标离开标签的事件:改变颜色
$("#sel-age").mouseout(function(){
$(this).css("background-color","");
});
// 输入框获取下拉框选中的值
$("#sel-age").change(function(){
var sval = $(this).val();
if(sval===""||sval===null||sval===undefined){
$("#age").val("");
}else{
$("#age").val(sval);
}
});
// 重要的一个步骤：设置select标签focus事件--获得焦点的时候,将下拉框默认选择一个空的选项
$("#sel-age").focus(function(){
//$("option[value='a']").prop('selected','true');
$("#sel-age").val('a');
});
});
</script>
<body>
<div>
<label for="">min age：</label>
<input type="text" id="age" maxlength="3" pattern="/^[0-9]{0,3}$/" />
<select name="age" id="sel-age" >
<option value=""></option>
<option value="ANY">ANY</option>
<option value="a" style="display: none;"></option>
</select>
</div>
</body>
</html>
