부트스트랩 선택 컨트롤 사용-JS 튜토리얼-php.cn

부트스트랩 선택 컨트롤 사용

PHPz

풀어 주다： 2018-10-15 15:42:35

원래의

5663명이 탐색했습니다.

이 컨트롤은 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 태그 아래에 태그를 추가하지 않아서 옵션이 비어있습니다

렌더링:

이제 내가 원하는 것은 검색창에 문자를 입력하자마자 이벤트가 트리거된다는 것입니다. 태그를 추가하기 위해 배경 데이터를 동적으로 가져옵니다.

오늘 직면한 문제는 검색창이 부트스트랩 선택 컨트롤에 의해 생성되고 이벤트를 트리거하기 위해 검색창을 선택하는 방법을 미리 알 수 없다는 것입니다.

해결책은 개발자 모드를 호출하는 것입니다. 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(&#39;.bs-searchbox&#39;).find(&#39;input&#39;).keyup(function () {                   
                  //键入的值
                  var inputManagerName =$(&#39;#addForm .open input&#39;).val();                  //判定键入的值不为空，才调用ajax
                  if(inputManagerName != &#39;&#39;){
                      $.ajax({
                            type: &#39;Get&#39;,
                            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(&#39;refresh&#39;);
                                   
                                }
                            }
                      })
                  }else 
                      //如果输入的字符为空，清除之前option标签
                      $("#select-manager").empty();
                      $("#select-manager").selectpicker(&#39;refresh&#39;);  
              });     
         });  </script>

로그인 후 복사

효과 아래와 같습니다.