비전공자 개발일기

Sumoselect 본문

JQuery

Sumoselect

HiroDaegu 2022. 7. 2. 10:56
728x90
SMALL

https://hemantnegi.github.io/jquery.sumoselect/

 

Jquery.sumoselect by Hemant Negi

jquery.sumoselect jquery.sumoselect.js - A cross device Single/Multi Select jQuery Select plugin. LIVE DEMO HERE Sumoselect full : jquery.sumoselect.js Minified : jquery.sumoselect.min.js A jQuery plugin that progressively enhances an HTML Select Box into

hemantnegi.github.io

https://codepen.io/sang-ulae-mustance/pen/xxWGOMy

 

sumoselect

...

codepen.io

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SUMOSELECT</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.4.6/sumoselect.min.css" integrity="sha512-vU7JgiHMfDcQR9wyT/Ye0EAAPJDHchJrouBpS9gfnq3vs4UGGE++HNL3laUYQCoxGLboeFD+EwbZafw7tbsLvg==" crossorigin="anonymous"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.4.6/jquery.sumoselect.min.js" integrity="sha512-QrFuYvQdMYt9Ux8Npgtqy1fnaN7qsNA68M0iFnyXwdrARBjLxrJrlbkdqrsmx7KThIagBgEdEDdWtEHm7cC2ag==" crossorigin="anonymous"></script>
</head>
<style>
  * {
    text-align: center;
    margin: 0 auto;
  }

  body {
    height: 100vh;
  }

  div.container {
    width: 50%;
    border: 3px solid;
    padding: 20px 0;
    margin-top: 20px;
  }

  h1 {
    margin-bottom: 20px;
  }
</style>
<body>
  <div class="container">
    <h1>Simple</h1>
    <label for="simpleTest1">single</label>
    <select class="testselect1" name="simpleTest1" id="simpleTest1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <br>
    <br>
    <br>
    <label for="multiTest1">mutiple</label>
    <select class="testselect2" name="multiTest1" id="multiTest1" multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>

  <div class="container">
    <h1>Optgroup</h1>
    <label for="optTest">optgroup</label>
    <select class="testselect3" name="optTest" id="optTest" multiple>
      <optgroup label="커피(Coffee)">
          <option value="americano">아메리카노</option>
          <option value="caffe latte">카페라떼</option>
          <option value="espresso">에스프레소</option>
      </optgroup>
      <optgroup label="티(Tea)">
          <option value="earl grey">얼그레이티</option>
          <option value="jasmine">자스민티</option>
      </optgroup>
    </select>
  </div>

  <div class="container">
    <h1>Search</h1>
    <label for="simpleTest4">single</label>
    <select class="testselect4" name="simpleTest4" id="simpleTest4">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <br>
    <br>
    <br>
    <label for="multiTest2">mutiple</label>
    <select class="testselect5" name="multiTest2" id="multiTest2" multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <br>
    <br>
    <br>
    <label for="optTest2">optgroup</label>
    <select class="testselect6" name="optTest" id="optTest2" multiple>
      <optgroup label="커피(Coffee)">
          <option value="americano">아메리카노</option>
          <option value="caffe latte">카페라떼</option>
          <option value="espresso">에스프레소</option>
      </optgroup>
      <optgroup label="티(Tea)">
          <option value="earl grey">얼그레이티</option>
          <option value="jasmine">자스민티</option>
      </optgroup>
    </select>
  </div>

  <div class="container">
    <h1>Placeholder</h1>
    <label for="multiTest3">mutiple</label>
    <select class="testselect7" name="multiTest3" id="multiTest3" multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>

  <div class="container">
    <h1>Select All</h1>
    <label for="multiTest4">mutiple</label>
    <select class="testselect8" name="multiTest4" id="multiTest4" multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>

</body>
<script>
  $(function() {

    $('.testselect1').SumoSelect();

    $('.testselect2').SumoSelect();

    $('.testselect3').SumoSelect();

    $('.testselect4').SumoSelect(
      {search: true, searchText: 'Enter here.'}
    );

    $('.testselect5').SumoSelect(
      {search: true, searchText: 'Enter here.'}
    );

    $('.testselect6').SumoSelect(
      {search: true, searchText: 'Enter here.'}
    );

    $('.testselect7').SumoSelect(
      {placeholder: 'This is a placeholder'}
    );

    $('.testselect8').SumoSelect(
      { okCancelInMulti: true, selectAll: true }
    );
  })
</script>
</html>
728x90
LIST

'JQuery' 카테고리의 다른 글

3D Interactive Card Hover  (0) 2022.07.17
Auto Rotate Image  (0) 2022.07.11
Sticky Note  (0) 2022.06.21
Simple Image Comparison Slider  (0) 2022.06.04
Virtual Keyboard  (0) 2022.06.01
'JQuery' Related Articles more