선택한 플러그인으로 선택 항목에 텍스트 추가하는 방법

이 게시물에는 선택한 플러그인이 없는 경우 선택 항목에 텍스트를 추가하는 방법이 표시됨

예를 들면 다음과 같음

 

1 2 3 4 5 6 7

<select id="#ddlFoxLearn" class="chosen-select">     <option value="1">Option 1</option>     <option value="2">Option 2</option>     <option value="3">Option 3</option>     <option value="4">Option 4</option>     <option value="5">Option 5</option> </select> Colored by Color Scripter

cs

html 파일에 css 추가

 

1

<link rel="stylesheet" href="/css/chosen.css" />

cs

 

html 파일에 javascript 추가

1 2

<script src="/js/jquery-3.3.1.min.js"></script> <script src="/js/chosen.jquery.min.js"></script>

cs

마지막으로

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<script type="text/javascript">     $(document).ready(function () {           var select = $("ddlFoxLearn");         // init the chosen plugin         select.chosen({ no_results_text: 'Press enter to add new entry.' });         //         var chosen = select.data('chosen');         // Bind the keyup event to the search box input         chosen.dropdown.find('input').on('keyup', function (e) {             // if we hit Enter and the results list is empty (no matches) add the option             if (e.which === 13 && chosen.dropdown.find('li.no-results').length > 0) {                 var option = $("<option>").val(this.value).text(this.value);                 // add the new option                 select.prepend(option);                 // automatically select it                 select.find(option).prop('selected', true);                 // trigger the update                 select.trigger("chosen:updated");             }         });     }); </script>   Colored by Color Scripter

cs

html 파일을 열면 모든 것이 정상적으로 작동하면 아래와 같이 나타남