jQuery는 선택기 플러그인을 사용하여 다중 선택 드롭다운 목록 필터 상자를 구현합니다(소스 코드 다운로드 포함)_jquery

Selectator는 다중 선택 및 검색 필터링 기능을 구현하는 jQuery 드롭다운 목록 상자 플러그인입니다. 검색을 지원하며 데이터 컨테이너로 사용되는 원래 선택 상자에 직접 영향을 줄 수 있습니다. 이 드롭다운 목록 상자 플러그인을 통해 여러 옵션을 그룹화하고, 옵션 아이콘을 설정하고, 옵션을 검색 및 필터링하고, 다중 선택을 수행할 수 있습니다.

효과 표시 소스 코드 다운로드

사용방법

이 드롭다운 카테고리 상자 플러그인을 사용하려면 fm.selectator.jquery.css, jQuery 및 fm.selectator.jquery.js 파일을 페이지에 도입해야 합니다.

<link rel="stylesheet" href="fm.selectator.jquery.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="fm.selectator.jquery.js"></script>

HTML 구조

아이콘 수준과 그룹화 옵션이 포함된 드롭다운 목록의 HTML 구조는 다음과 같습니다.

<label for="select">
Multi select with custom content:
</label>
<select id="select" name="select" multiple>
<optgroup label="Group one" class="group_one">
<option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
<option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
</optgroup>
<optgroup label="Group two" class="group_two">
<option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
<option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
<option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
<option value="6" class="option_six">Six</option>
</optgroup>
<optgroup label="Group three" class="group_three">
<option value="7" class="option_seven">Seven</option>
</optgroup>
<option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
<option value="9" class="option_nine">Nine</option>
<option value="10" class="option_ten" selected>Ten</option>
<option value="11" class="option_eleven" selected>Eleven</option>
<option value="12" class="option_twelve">Twelve</option>
<option value="13" class="option_thirteen">Thirteen</option>
<option value="14" class="option_fourteen">Fourteen</option>
</select>
<input value="activate selectator" id="activate_selectator4" type="button">

플러그인 초기화

페이지 DOM 요소가 로드된 후 selector() 메서드를 통해 드롭다운 목록 플러그인을 초기화할 수 있습니다.

$('#selectBox').selectator();

태그를 사용하여 직접 초기화할 수도 있습니다.

<select multiple class="selectator" data-selectator-keep-open="true">

구성 매개변수

$('#selectBox').selectator({
prefix: 'selectator_', // CSS class prefix
height: 'auto', // auto or element
useDimmer: false, // dims the screen when option list is visible
u**arch: true, // if false, the search boxes are removed and 
// `showAllOptionsOnFocus` is forced to true
keepOpen: false, // if true, then the dropdown will not close when 
// selecting options, but stay open until losing focus
showAllOptionsOnFocus: false, // shows all options if input box is empty
selectFirstOptionOnSearch: true, // selects the topmost option on every search
searchCallback: function(value){}, // Callback function when enter is pressed and 
// no option is active in multi select box
labels: {
search: 'Search...' // Placeholder text in search box in single select box
}
});

기타 사용 가능한 속성 태그

data-left, data-right 및 data-subtitle 태그를 사용하여 드롭다운 목록의 표시 정보를 확장할 수 있습니다. 접두사 prefix_title, prefix_left, prefix_right 및 prefix_subtitle을 사용하여 CSS를 통해 스타일을 지정할 수 있습니다. 데이터는 모두 순수 HTML 코드이므로 이미지 코드도 사용할 수 있습니다.

<select id="selectBox">
<!-- Normal option tag -->
<option value="1">This is the title</option>
<!-- Extended option tag -->
<option value="2" data-left="This is the left section"
data-right="This is the right section"
data-subtitle="This is the section under the title">This is the title</option>
</select>

의 코드는 다음과 유사한 구조로 나타납니다.

CSS 수업

수업	설명
prefix_element	새로운 드롭다운 목록 상자입니다. 동일한 추가 클래스인 single 및 multiple 이 함께 제공되며, 이는 단일 선택인지 다중 선택인지 설정하는 데 사용됩니다.또한 options-visible 및 options-hidden 옵션 표시 여부를 설정하는 데 사용됩니다
prefix_chosen_items	선택한 옵션을 담는 용기
prefix_chosen_item	현재 선택한 옵션의 컨테이너
prefix_chosen_item_title	현재 선택된 옵션의 제목
prefix_chosen_item_left	현재 선택한 옵션 왼쪽의 콘텐츠
prefix_chosen_item_right	현재 선택한 옵션 오른쪽 내용
prefix_chosen_item_subtitle	현재 선택된 옵션의 자막
prefix_chosen_item_remove	현재 선택한 옵션의 제거 버튼
prefix_input	선택기용 입력 상자입니다. 옵션 표시 또는 옵션 숨김과 함께 사용되어 다중 선택 상자인지 단일 선택 상자인지 다르게 표시하고 스타일을 지정합니다.
prefix_textlength	다중 선택 상자의 입력 크기를 계산하는 데 사용됩니다
접두사_옵션	옵션 목록 컨테이너
prefix_group_header	그룹명
prefix_group	그룹 컨테이너
접두사_옵션	결과 옵션.클래스 active 를 사용하여 현재 활성화된 옵션을 나타냅니다
접두사_옵션_제목	결과 옵션 제목
prefix_option_left	결과 옵션 왼쪽의 콘텐츠
prefix_option_right	결과 옵션 오른쪽 내용
prefix_option_subtitle	결과 옵션 오른쪽에 자막
prefix_dimmer	어둡게

방법

方法	描述
refresh	该方法用于刷新插件
destroy	该方法用于销毁插件

jquery.selectator-custom 드롭다운 목록 플러그인의 github 주소는 다음과 같습니다.

https://github.com/Lepshey/jquery.selectator-custom