Skip to content

Instantly share code, notes, and snippets.

@jhnwllr

jhnwllr/.block

Last active December 26, 2018 11:50
Show Gist options
  • Save jhnwllr/d7439158a8ae17b921fd19294524ca89 to your computer and use it in GitHub Desktop.
Save jhnwllr/d7439158a8ae17b921fd19294524ca89 to your computer and use it in GitHub Desktop.
Download ZIP
jquery example multiple select
Raw
.block
license: mit
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap2.min.css" />
</head>
<body>
<p></p>
<select id="multiple" multiple="multiple">
<option>Dog</option>
<option>Cat</option>
<option>Turtle</option>
</select>
<script>
function displayVals() {
var multipleValues = $( "#multiple" ).val() || [];
$( "p" ).html( "Multiple: " + multipleValues.join( ", " ) );
}
function printVals() {
var logPrint = $( "#multiple" ).val() || [];
console.log(logPrint);
}
$( "select" ).change( printVals );
printVals();
$( "select" ).change( displayVals );
displayVals();
$(function() {
$('#multiple').selectize({
delimiter: ',',
persist: false,
plugins: ['remove_button'],
create: function(input) {
return {
value: input,
text: input
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment