부트스트랩 선택 컨트롤 사용
- PHPz원래의
- 2017-10-16 09:19:295617검색
이 컨트롤은 Bootstrap 프런트 엔드 프레임워크를 사용합니다.
이 컨트롤의 구체적인 사용법은 위 링크를 참조하세요.
이 컨트롤의 사용법 중 하나는 선택 태그의 옵션을 선택하므로 정확한 옵션을 얻을 수 있습니다.
이제 읽는 대신 검색창에 키워드를 입력하여 백그라운드에서 전달된 옵션 데이터를 동적으로 가져오고 싶습니다.
구체적인 구현은 다음과 같습니다.
1. 관련 파일 소개:
<head>
<!-- 引入 Bootstrap样式 -->
<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap-select样式 -->
<link href="${pageContext.request.contextPath}/resources/css/select/bootstrap-select.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 依赖于 jQuery) -->
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
<!-- Bootstrap-select 控件 -->
<script src="${pageContext.request.contextPath}/resources/js/select/bootstrap-select.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/select/defaults-zh_CN.min.js"></script>
</head>태그
<form id="addForm" action="${pageContext.request.contextPath}/admin/authority/manager/saveAdd" method="post">
<p class="form-group">
<p class="input-group">
<span class="input-group-addon" >管理员</span>
<!--触发bootstrap-select需添加class="selectpicker" 搜索功能需添加data-live-search="true" -->
<select data-size="6" class="form-control selectpicker show-tick" data-live-search="true" title="请输入管理员" id="select-manager" name="managerName" data-selectNameUrl="${pageContext.request.contextPath}/admin/authority/managerRole/getManagerByName" >
</select>
</p>
</p>
<p class="form-group">
<p class="input-group">
<span class="input-group-addon" >角 色</span>
<select class="form-control selectpicker show-tick" data-size="6" data-live-search="true" id="select-role" name="roleName" title="请选择角色" >
<c:forEach var="selectRole" items="${selectRoles}" varStatus="statu">
<option value ="${selectRole.id}" >${selectRole.roleName}</option>
</c:forEach>
</select>
</p>
</p>
</form>지금까지 관리는 회원의 select 태그 아래에 5a07473c87748fb1bf73f23d45547ab84afa15d3069109ac30911f04c56f3338 태그를 추가하지 않아서 옵션이 비어있습니다
렌더링:
이제 내가 원하는 것은 검색창에 문자를 입력하자마자 이벤트가 트리거된다는 것입니다. 5a07473c87748fb1bf73f23d45547ab84afa15d3069109ac30911f04c56f3338 태그를 추가하기 위해 배경 데이터를 동적으로 가져옵니다.
오늘 직면한 문제는 검색창이 부트스트랩 선택 컨트롤에 의해 생성되고 이벤트를 트리거하기 위해 검색창을 선택하는 방법을 미리 알 수 없다는 것입니다.
해결책은 개발자 모드를 호출하는 것입니다. chrome을 사용하여 아래와 같이 bootstrap-select 컨트롤에 의해 생성된 레이블을 찾습니다.
bootstrap-select에 의해 생성된 검색 창의 관련 레이블과 속성을 알고 나면, 검색창을 선택하여 이벤트를 실행할 수 있습니다.
3. 이벤트 실행:
<script type="text/javascript">
$().ready(function(){
//键入字符触发事件:动态获得后台传入select选项数据
//请求的url
var selectNameUrl = $("#select-manager").attr("data-selectNameUrl");
//选择得到搜索栏input，松开按键后触发事件
$("#select-manager").prev().find('.bs-searchbox').find('input').keyup(function () {
//键入的值
var inputManagerName =$('#addForm .open input').val(); //判定键入的值不为空，才调用ajax
if(inputManagerName != ''){
$.ajax({
type: 'Get',
url: selectNameUrl,
data: { //传递到后台的值 managerName: inputManagerName
},
dataType: "Json",
success: function (Selectmanagers) { //清除select标签下旧的option签，根据新获得的数据重新添加option标签
$("#select-manager").empty(); if (Selectmanagers != null) {
$.each(Selectmanagers, function (i,Selectmanager) {
$("#select-manager").append(" <option value=\"" + Selectmanager.id + "\">" + Selectmanager.managerName + "</option>");
}) //必不可少的刷新
$("#select-manager").selectpicker('refresh');
}
}
})
}else
//如果输入的字符为空，清除之前option标签
$("#select-manager").empty();
$("#select-manager").selectpicker('refresh');
});
}); </script>효과 아래와 같습니다.
【관련 영상 추천: 부트스트랩 튜토리얼】
위 내용은 부트스트랩 선택 컨트롤 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!