JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
<div class="modal-body"></div>

<br/><br/>

<select class="html-multi-chosen-select" multiple="multiple">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
    <option value="baz">baz</option>
    <option value="qux">qux</option>
</select>

<br/><br/>

<select class="simple-select">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
    <option value="baz">baz</option>
    <option value="qux">qux</option>
</select>

JavaScript

$html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">';
    $html += '<option value="foo">foo</option>';
    $html += '<option value="bar">bar</option>';
    $html += '<option value="baz">baz</option>';
    $html += '<option value="qux">qux</option>';    
    $html += '</select>';
$('.modal-body').html($html);

$('.chosenElement').chosen({ width: "210px" });

$('.html-multi-chosen-select').chosen({ width: "210px" });

$('.simple-select').chosen({ width: "210px" });