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

집

웹 프론트엔드

JS 튜토리얼

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

PHPz

Oct 16, 2017 am 09:19 AM

사용제어

이 컨트롤은 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>

효과 아래와 같습니다.

【관련 영상 추천: 부트스트랩 튜토리얼】

위 내용은 부트스트랩 선택 컨트롤 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

如何在Go中使用命名管道？May 11, 2023 pm 04:22 PM

命名管道是一种在操作系统中相对比较低级的进程通信方式，它是一种以文件为中介的进程通信方式。在Go语言中，通过os包提供了对命名管道的支持。在本文中，我们将介绍如何在Go中使用命名管道来实现进程间通信。一、命名管道的概念命名管道是一种特殊的文件，可以被多个进程同时访问。在Linux系统中，命名管道是一种特殊的文件类型，它们存在于文件系统的某个位置上，并且可以在

如何在Go中使用第三方库？May 11, 2023 pm 03:30 PM

在Go语言中，使用第三方库是非常方便的。许多优秀的第三方库和框架可以帮助我们快速地开发应用程序，同时也减少了我们自己编写代码的工作量。但是如何正确地使用第三方库，确保其稳定性和可靠性，是我们必须了解的一个问题。本文将从以下几个方面介绍如何使用第三方库，并结合具体例子进行讲解。一、第三方库的获取Go语言中获取第三方库有以下两种方式：1.使用goget命令首先

如何在PHP中使用协程？May 12, 2023 am 08:10 AM

随着传统的多线程模型在高并发场景下的性能瓶颈，协程成为了PHP编程领域的热门话题。协程是一种轻量级的线程，能够在单线程中实现多任务的并发执行。在PHP的语言生态中，协程得到了广泛的应用，比如Swoole、Workerman等框架就提供了对协程的支持。那么，如何在PHP中使用协程呢？本文将介绍一些基本的使用方法以及常见的注意事项，帮助读者了解协程的运作原理，以

如何在 Windows 11 中按需使用 OneDrive 的文件Apr 14, 2023 pm 12:34 PM

<p>Windows 系统上的 OneDrive 应用程序允许您将文件存储在高达 5 GB 的云上。OneDrive 应用程序中还有另一个功能，它允许用户选择一个选项，是将文件保留在系统空间上还是在线提供，而不占用您的系统存储空间。此功能称为按需文件。在这篇文章中，我们进一步探索了此功能，并解释了有关如何在 Windows 11 电脑上的 OneDrive 中按需使用文件的各种选项。</p><h2>如何使用 On

如何在Go中使用WebSocket？May 11, 2023 pm 04:17 PM

近年来，WebSocket技术已经成为了Web开发中不可或缺的一部分。WebSocket是一种在单个TCP连接上进行全双工通信的协议，它使得客户端和服务器之间的通信更加流畅和高效。如今，很多现代的Web应用程序都使用了WebSocket技术，例如实时聊天、在线游戏以及实时数据可视化等。Go语言作为一个现代的编程语言，自然也提供了很好的支持WebSock

如何在Go中使用音频处理？May 11, 2023 pm 04:37 PM

随着音频处理在各种应用场景中的普及，越来越多的程序员开始使用Go编写音频处理程序。Go语言作为一种现代化的编程语言，具有优秀的并发性和高效率的特点，使用它进行音频处理十分方便。本文将介绍如何在Go中使用音频处理技术，包括读取、写入、处理和分析音频数据等方面的内容。一、读取音频数据在Go中读取音频数据有多种方式。其中比较常用的是使用第三方库进行读取，比如go-

如何在Go中使用嵌套结构？May 11, 2023 pm 04:39 PM

在Go语言中，嵌套结构是一种非常常见的技术。通过将一个结构体嵌入到另一个结构体中，我们可以将复杂的数据模型分解成更小的部分，使其易于理解和维护。本篇文章将介绍如何在Go中使用嵌套结构以及一些最佳实践。一、定义嵌套结构首先，我们需要定义一个包含嵌套结构的结构体。下面的代码演示了如何定义一个包含Person结构体的Company结构体：typePersons

Go语言Web开发框架中常见的富文本编辑器控件Jun 04, 2023 am 09:10 AM

随着Web应用程序的普及，富文本编辑器成为Web开发中必不可少的一个工具。而在使用Go语言进行Web开发时，我们也需要选择一个适合的富文本编辑器控件来丰富我们的网站和应用程序。在本文中，我们将会探讨Go语言Web开发常见的富文本编辑器控件。FroalaEditorFroalaEditor是一款流行的富文本编辑器控件，被广泛应用于Web开发中。它具有现代化

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.