JSFiddle - React, Tailwind, and code Playground

by nothrem

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.4.2/slimselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.4.2/slimselect.css">
<label for=demo style="display: block; height: 5em; border: 1px solid red">Hi, I'm select - click me!</label>
<select id=demo name=demo multiple>
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
</select>

JavaScript

$(function($) {
	let ss = new SlimSelect({
  	select: '#demo',
    settings: {
    	showSearch: false
    }
  });
  console.log('Converted', ss);
  
  $('label').on('click', function() {
    let elId = $(this).attr('for');
    let ssId = $(document.getElementById(elId)).attr('data-id');
    $('.ss-main[data-id="'+ssId+'"]').click();
    return false;
  })
});