<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>myDataList</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/register.css">
<script type="text/javascript" src="js/jquery-1.11.3-min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/register.js"></script>
</head>
<body>
<div class="container" style="margin-top: 20px;">
<form class="form-horizontal" role="form" id="register_form">
<div class="form-group margin_top_15">
<label for="hospital_name" class="col-md-3 control-label">选择类型</label>
<div class="col-md-9">
<select name="hospitalType"
class="form-control form-control-select" id='hospital_type'
errortips="请选择医院类型">
<option selected="selected" value='-1'>A</option>
<option value='0'>B</option>
<option value='1'>C</option>
</select>
</div>
</div>
<div class="form-group margin_top_15">
<label style="padding-top: 2px;" for="business_license" class="col-md-3 control-label">上传图片</label>
<div class="col-md-9">
<input type="file" class="inline" id="business_license"
name="licenseImg" onmousemove="onMouseMoveLicense()"
onmouseout="onMouseOutLicense()"
accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png"
onchange="validate_license()" placeholder="请上传营业执照图片"
tips="请上传jpg、jpeg、gif、png、bmp图片；图片大小不能超过10M"
errortips="只支持jpg、jpeg、gif、png、bmp格式的图片">
</div>
</div>
<div class="form-group margin_top_15">
<label class="col-md-3 control-label">所在地区</label>
<div class="col-md-9">
<div class="input-group select_bar" id="province">
<input type="text" onfocus="onProvinceFocus()" onkeydown="onProvinceKey()" onchange="onProvinceChange()"
list="provinceInput" class="form-control sel_input">
<datalist id="provinceInput"></datalist>
<div class="input-group-btn sel_btn">
<ul class="dropdown-menu">
<li onclick="onProvinceClick();"><a>请选择</a></li>
</ul>
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
<div class="input-group select_bar" id="city">
<input type="text" onchange="onCityChange()" onfocus="onCityFocus()" onkeydown="onCityKey()"
list="cityInput" class="form-control sel_input">
<datalist id="cityInput"></datalist>
<div class="input-group-btn sel_btn">
<ul class="dropdown-menu">
<li onclick="onCityClick();"><a>请选择</a></li>
</ul>
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
<div class="input-group select_bar" id="area"
errortips="请选择或填写正确的地区信息">
<input type="text" onchange="onAreaChange()" onfocus="onAreaFocus()" onkeydown="onAreaKey()"
list="areaInput" class="form-control sel_input">
<datalist id="areaInput"></datalist>
<div class="input-group-btn sel_btn">
<ul class="dropdown-menu">
<li onclick="onAreaClick();"><a>请选择</a></li>
</ul>
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
使用bootstrap和jQuery制作下拉输入框
需积分: 45 29 浏览量
2016-12-21
14:57:56
上传
评论 1
收藏 66KB ZIP 举报
datalist_select.zip （7个子文件） 
datalist_select css 
bootstrap.min.css 120KB register.css 1KB img 
index.html 4KB js bootstrap.min.js 36KB jquery-1.11.3-min.js 94KB register.js 12KB .project 1KB资源评论
