JSFiddle - React, Tailwind, and code Playground

by grahampcharles

HTML

<script src="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/src/jquery.multiselect.min.js"></script>
<link rel="stylesheet" href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/jquery.multiselect.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css">
<select multiple="multiple" id="test">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</select>

<div id="target">target</div>
<button id="clickme">Click to change header</button>

CSS

#target { padding: 5px; border: 1px solid #000; width:200px; float:right }

JavaScript

var target = $("#target");

    $("button").click( function() {
        $("#test").multiselect("option", "header", "changed!"); 
    });
    

$("select")
    .multiselect()
    .bind("multiselectclick multiselectcheckall multiselectuncheckall", function( event, ui ){
        
        // the getChecked method returns an array of DOM elements.
        // map over them to create a new array of just the values.
        // you could also do this by maintaining your own array of 
        // checked/unchecked values, but this is just as easy.
        var checkedValues = $.map($(this).multiselect("getChecked"), function( input ){
            return input.value;
        });
        
        // update the target based on how many are checked
        target.html(
            checkedValues.length
                ? checkedValues.join(', ')
                : 'Please select a checkbox' 
        );
    })
    .triggerHandler("multiselectclick"); // trigger above logic when page first loads