JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<script src="https://dl.dropboxusercontent.com/u/28858864/jquery.AreYouSure-1.8-dev/jquery.are-you-sure.js"></script>
<form name="post" action="post.php" method="post" id="post">
    <table class="form-table">
        <tbody>
            <tr valign="top" class="even first">
                <th scope="row" class="first last">
                    <label for="wpbo_all">Everywhere</label>
                </th>
                <td>
                    <label for="wpbo_all">
                        <input type="checkbox" name="wpbo_display_all" id="wpbo_all" value="all">Display this popup everywhere on the site.</label>
                </td>
            </tr>
            <tr valign="top" class="even first">
                <th scope="row" class="first last">
                    <label for="wpbo_post"><strong>Post</strong>

                    </label>
                </th>
                <td>
                    <select name="wpbo_display_post[]" id="wpbo_post" data-placeholder="Select one or more Post" style="width:350px;" multiple class="chosen-select">
                        <option value='59'>Test</option>
                        <option value='1' selected="selected">Bonjour tout le monde&nbsp;!</option>
                    </select>
                    <div class="wpbo-post-type-all">
                        <label for="wpbo_display_post">
                            <input type="checkbox" name="wpbo_display_post_all" id="wpbo_display_post" value="all">Display on all Post</label>
                    </div>
                </td>
            </tr>
            <tr valign="top" class="even first">
                <th scope="row" class="first last">
                    <label for="wpbo_page"><strong>Page</strong>

                    </label>
                </th>
                <td>
      ...

CSS

/* For demo purpose only */
body {
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
table {
    background: #efefef;
    border: 1px solid #ddd;
    margin: 2em;
}
td {
    padding: 1em;
}

JavaScript

var settingsForm = $('#post');

// Improve the UI/UX of select dropdowns		
if (jQuery().chosen) {

    $('.chosen-select').each(function () {
        var el = {
            parentTD: $(this).parents('td'),
            errorMsg: $('<div>', {
                class: 'wpbo-warning',
                style: 'display:none'
            })
        };

        el.errorMsg.appendTo(el.parentTD);

        $(this).chosen().change(function () {

            settingsForm.trigger('checkform.areYouSure');

            $(this).next('.chosen-container').find('.chosen-choices').addClass('chosen-loading');

            // I'm doing some stuff here (AJAX) but I don't think it matters

        });
    });
}

// Warning if unsaved changes
if (jQuery().areYouSure) {
    settingsForm.areYouSure();
}