三种下拉搜索框-html、select2、angularJs

一、概述

        需要做一个简单的下拉搜索,简单收集整理了下几种下拉搜索实现。分别为只用html,使用select2,使用angular。没有优化界面,只用基本功能。

        简单整合,资源为相对路径直接可以直接用。

链接:https://pan.baidu.com/s/1XlmJPTzfnWvPmwbBTuXt-w 
提取码:4b50 
 

二、使用HTML

使用html的DataList

代码:

<html>
<head>
    <title>下拉输入框</title>
	
</head>
<body>
    <form>	
		<div>DATALIST下拉输入框</div>
		<div class="form-group country-opt-group">
			<input class="form-control input_value  " id="dataitem" list="DATALIST"/>
				   <datalist id="DATALIST" class="country-opt">
							 <option >1111</option> 
							 <option >2222</option> 
							 <option >3333</option> 
				   </datalist>
			</input>
		</div>
		<div>
    </form>
</body>
</html>

运行效果:

 三、使用select2

代码:

<html>
<head>
    <title>下拉输入框</title>
	<script src="jquery/jquery.min.js" type="text/javascript"></script>
    <link href="jquery-select2/3.4/select2.min.css" rel="stylesheet">
    <script src="jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
	
</head>
<body>
    <form>
        
		
		<div>select下拉输入框</div>
		<select class="js-select2" name="state">
		  <option value="1">张三</option>
		  <option value="2">李四</option>
		  <option value="2">王五</option>
		</select>
		</div>
		
        <script>

			$(document).ready(function() {
				$('.js-select2').select2();
			})

        </script>
    </form>


</body>
</html>

效果:

三、使用angularJs

 代码:

 <html>
 <head>
  <meta charset="utf-8">
  <title>搜索下拉框</title>
<script src="jquery/jquery.min.js" type="text/javascript"></script>
	 <script src="angular/angular.min.js" type="text/javascript"></script>

 <style>

 </style>
 <script>
     $(function(){
         $('#mylab').focus(function(){
            $('.wrap-mylab').slideDown();
         });
     });
     var app = angular.module('myApp',[])
		app.controller('myCtrl',function($scope){
	 });
     function passvalue(obj){
         var returnvalue = $(obj).text();
        $('#mylab').val(returnvalue);
         $('.wrap-mylab').slideUp('fast');
     }
 </script>
 </head>
 <body  ng-app="myApp" ng-controller="myCtrl" ng-init="dataname=['张三','李四','王五','邓六']">
     <div class="row">
         <div>
             <form >
                 <div>
                    <label for="mylab">选择人员: </label>
                     <div>
                         <input type="text"  id="mylab" ng-model="nowName">
                         <ul class="wrap-mylab">
                            <li onClick="passvalue(this)" ng-repeat="x in dataname | filter:nowName">{{x}}</li>
                         </ul>
                     </div>
                </div>
             </form>
         </div>
     </div>
 </body>
 </html>

效果:

 

  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS中实现三级级联下选择框,可以使用ng-options指令和ng-change指令。 首先,在HTML中定义三个下选择框: ``` <select ng-model="selectedProvince" ng-options="province.name for province in provinces" ng-change="provinceChange()"></select> <select ng-model="selectedCity" ng-options="city.name for city in cities" ng-change="cityChange()"></select> <select ng-model="selectedDistrict" ng-options="district.name for district in districts"></select> ``` 然后,在控制器中定义省市区的数据,并初始化第一个下选择框的选项: ``` $scope.provinces = [ {name: '北京市', cities: [ {name: '北京市', districts: [{name: '东城区'}, {name: '西城区'}, {name: '朝阳区'}, {name: '丰台区'}, {name: '石景山区'}, {name: '海淀区'}, {name: '门头沟区'}, {name: '房山区'}, {name: '通州区'}, {name: '顺义区'}, {name: '昌平区'}, {name: '大兴区'}, {name: '怀柔区'}, {name: '平谷区'}, {name: '密云区'}, {name: '延庆区'}]} ]}, {name: '上海市', cities: [ {name: '上海市', districts: [{name: '黄浦区'}, {name: '徐汇区'}, {name: '长宁区'}, {name: '静安区'}, {name: '普陀区'}, {name: '虹口区'}, {name: '杨浦区'}, {name: '闵行区'}, {name: '宝山区'}, {name: '嘉定区'}, {name: '浦东新区'}, {name: '金山区'}, {name: '松江区'}, {name: '青浦区'}, {name: '奉贤区'}, {name: '崇明区'}]} ]} ]; $scope.cities = $scope.provinces[0].cities; $scope.districts = $scope.cities[0].districts; $scope.provinceChange = function() { $scope.cities = $scope.selectedProvince.cities; $scope.cityChange(); }; $scope.cityChange = function() { $scope.districts = $scope.selectedCity.districts; }; ``` 在控制器中,通过ng-options指令绑定数据和选项,通过ng-change指令实现级联下选择框的更新。首先在省的下选择框中选中一个省,然后触发provinceChange函数,在该函数中更新市的下选择框的选项,并触发cityChange函数。cityChange函数中更新区的下选择框的选项。 最后,为每个下选择框绑定选中的值,即ng-model指令,例如: ``` <select ng-model="selectedProvince" ng-options="province.name for province in provinces" ng-change="provinceChange()"></select> ``` 其中,$scope.selectedProvince、$scope.selectedCity、$scope.selectedDistrict分别表示选中的省、市、区。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值