jQuery Chosen Plugin
HTML File:
----------------
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"
/>
<title></title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
<script>
var arrValues;
$(document).ready(function () {
$html = '<select class="html-multi-chosen-select1"
multiple="multiple" id="myselect">';
$html += '<option
value="1">one</option>';
$html += '<option
value="2">two</option>';
$html += '<option
value="3">three</option>';
$html += '<option
value="4">four</option>';
$html += '</select>';
$('#divMain').html($html);
$('.html-multi-chosen-select1').chosen({ width: "210px" });
$("#btnRead").click(function () {
var arrValues = $("#myselect").chosen().val();
$("#lblValues").html(arrValues.toString());
console.log(arrValues);
for (var i = 0, len = arrValues.length; i < len; i++) {
console.log(arrValues[i]);
}
});
$("#btnSetValue").click(function () {
$('.html-multi-chosen-select1').val('2');
$('.html-multi-chosen-select1').trigger('chosen:updated');
});
});
</script>
</head>
<body>
<div id="divMain"></div>
<button type="button" id="btnRead">Read Values</button>
<button type="button" id="btnSetValue">Set value 2</button><br>
<label id="lblValues"></label>
</body>
</html>
------------
No comments:
Post a Comment