JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<h2>Nice Select</h2>

<div>
    <select id="nice-select">
        <option value="false" selected>Quick Buy</option>
        <optgroup label="Concerts, talks &amp; events">
            <option value="/tickets/backstage-tours-2017">Backstage tours 2017</option>
        </optgroup>
        <optgroup label="Festival 2017">
            <option value="/tickets/hipermestra">Hipermestra</option>
            <option value="/tickets/la-traviata">La traviata</option>
            <option value="/tickets/hamlet">Hamlet</option>
            <option value="/tickets/ariadne-auf-naxos">Ariadne auf Naxos</option>
            <option value="/tickets/don-pasquale">Don Pasquale</option>
            <option value="/tickets/la-clemenza-di-tito">La clemenza di Tito</option>
        </optgroup>
    </select>
</div>

<h2>Select2</h2>

<div>
    <select id="select2">
        <option value="false" selected>Quick Buy</option>
        <optgroup label="Concerts, talks &amp; events">
            <option value="/tickets/backstage-tours-2017">Backstage tours 2017</option>
        </optgroup>
        <optgroup label="Festival 2017">
            <option value="/tickets/hipermestra">Hipermestra</option>
            <option value="/tickets/la-traviata">La traviata</option>
            <option value="/tickets/hamlet">Hamlet</option>
            <option value="/tickets/ariadne-auf-naxos">Ariadne auf Naxos</option>
            <option value="/tickets/don-pasquale">Don Pasquale</option>
            <option value="/tickets/la-clemenza-di-tito">La clemenza di Tito</option>
      ...

CSS

.nice-select {
    display: inline-block;
    float: none;
}

JavaScript

$(document).ready(function () {
		// Example with nice select
		$('#nice-select').niceSelect();
    
    $('#nice-select').on('change', function () {
    		var url = $(this).val();
        if (url !== false) {
						alert('Now navigating to: ' + $(this).val());
        }
    });

		// Example with select2
		$('#select2').select2();

    $('#select2').on('change', function () {
    		var url = $(this).val();
        if (url !== false) {
						alert('Now navigating to: ' + $(this).val());
        }
    });
});