JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.ryancramer.com/projects/asmselect/jquery.asmselect.css">
<h1>Example 3: Monitoring Changes to the Select</h1>
<h3>
This example demonstrates how you can catch asmSelect events by attaching a change event to the original select.
In this rough example, we setup our change event to highlight manipulated items with a yellow flash of color.
We also record a history of changes in the right column. View the source of this page for details.
</h3>
<form action="./example_results.php" method="post">
<ul id="changes"></ul>
<label for="cities">What are your favorite cities?</label>
<select id="cities" multiple="multiple" name="cities[]" title="Click to Select a City">
<option data-sortby="2" selected="selected">Amsterdam</option>
<option data-sortby="3" selected="selected">Atlanta</option>
<option>Baltimore</option>
<option>Boston</option>
<option>Buenos Aires</option>
<option>Calgary</option>
<option data-sortby="1" selected="selected">Chicago</option>
<option>Denver</option>
<option>Dubai</option>
<option>Frankfurt</option>
<option>Hong Kong</option>
<option>Honolulu</option>
<option>Houston</option>
<option>Kuala Lumpur</option>
<option>London</option>
<option>Los Angeles</option>
<option>Melbourne</option>
<option>Mexico City</option>
<option>Miami</option>
<option>Minneapolis</option>
<option>Montreal</option>
<option>New York City</option>
<option>Paris</option>
<option>Philadelphia</option>
<option>Rotterdam</option>
<option>San Diego</option>
<option>San Francisco</option>
<option>Sao Paulo</option>
<option>Seattle</option>
...
CSS
form {
width: 400px;
position: relative;
}
#changes {
position: absolute;
width: 200px;
left: 430px;
background: #fff;
}
JavaScript
/*
* Alternate Select Multiple (asmSelect) 1.0.4a beta - jQuery Plugin
* http://www.ryancramer.com/projects/asmselect/
*
* Copyright (c) 2009 by Ryan Cramer - http://www.ryancramer.com
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Updated by J. Garcia: added support for arbitrary sorting of initially selected items
*/
(function($) {
$.fn.asmSelect = function(customOptions) {
var options = {
listType: 'ol', // Ordered list 'ol', or unordered list 'ul'
sortable: false, // Should the list be sortable?
highlight: false, // Use the highlight feature?
animate: false, // Animate the the adding/removing of items in the list?
addItemTarget: 'bottom', // Where to place new selected items in list: top or bottom
hideWhenAdded: false, // Hide the option when added to the list? works only in FF
debugMode: false, // Debug mode keeps original select visible
removeLabel: 'remove', // Text used in the "remove" link
highlightAddedLabel: 'Added: ', // Text that precedes highlight of added item
highlightRemovedLabel: 'Removed: ', // Text that precedes highlight of removed item
containerClass: 'asmContainer', // Class for container that wraps this widget
selectClass: 'asmSelect', // Class for the newly created <select>
optionDisabledClass: 'asmOptionDisabled', // Class for items that are already selected / disabled
listClass: 'asmList', // Class for the list ($ol)
listSortableClass: 'asmListSortable', // Another class given to the list when it is sortable
listItemClass:...