[javascript/select2] Create a searchable select using select2. #01 (ENG)

Sometimes when you use a drop-down list, you want to make it searchable.

There are some open sources that are being offered, and I often use select2.

 

 

 

 

It is easy to use and provides many functions, making it easy to use in any web framework.

Select2 provides the source from the cdn.

 

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

For simple use, add the above source code to the head section as above.

  <select>
    <option>경기도</option>
    <option>강원도</option>
    <option>경상도</option>
    <option>전라도</option>
    <option>충청도</option>
    <option>제주도</option>
    <option>서울</option>
    <option>부산</option>
    <option>광주</option>
  </select>

Select is made in the same form as the original html tag

 

<script type="text/javascript">
    $(document).ready(function(){
        $('select').select2();
    })
</script>

 

You can initialize select2 in the header.

The code is

 

https://jsfiddle.net/moojin/gomk8sj1/1/

 

You can check it out here.

 

In the next section, select2 will be grouped