In this article, I have explain how to choose single itme from list of item using jquery.
In this example we have list coureses we want select one course from given list of course and get the value of selected course.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery ui-choose Examples</title>
<style>
.selected > span {
background: #4285F4;
color: #fff;
}
.choose-option ul {
display: inline;
list-style: none;
}
.choose-option li {
list-style:none;
padding:5px;
}
.choose-option li.selected {
color:#4285F4;
}
li > span{
color:#fff;
padding:1px 5px;
margin-left:5px;
}
</style>
</head>
<body>
<ul class="choose-option" id="cooseCourse">
<li>Java <span>✓</span> </li>
<li>C# <span>✓</span> </li>
<li> PHP <span>✓</span> </li>
<li> Python <span>✓</span></li>
<li> ASP<span>✓</span> </li>
</ul>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="JS/ui-choose.js"></script>
<script>
$('.choose-option').ui_choose();
$('#cooseCourse').click(function () {
var val = $("ul li.selected").html();
var coures = val.split("<");
alert("Selected Course : " + coures[0]);
});
</script>
</html>
create a javascript file and add following code to it.
/**
* ui-choose
*
*/
; + function($) {
"use strict";
var defaults = {
itemWidth: null,
skin: '',
multi: false,
active: 'selected',
full: false,
colNum: null,
dataKey: 'ui-choose',
change: null,
click: null
};
/**
* ui-choose
*/
$.fn.ui_choose = function(options) {
var _this = $(this),
_num = _this.length;
if (_num === 1) {
return new UI_choose(_this, options);
};
if (_num > 1) {
_this.each(function(index, el) {
new UI_choose($(el), options);
})
}
};
/**
* UI_choose
* @param {[jQuery]} el [jQuery]
* @param {[object]} opt []
*/
function UI_choose(el, opt) {
this.el = el;
this._tag = this.el.prop('tagName').toLowerCase();
this._opt = $.extend({}, defaults, opt);
return this._init();
}
// UI_choose
UI_choose.prototype = {
// init
_init: function() {
var _data = this.el.data(this._opt.dataKey);
if (_data)
return _data;
else
this.el.data(this._opt.dataKey, this);
if (this._tag == 'select') {
this.multi = this.el.prop('multiple');
} else {
this.multi = this.el.attr('multiple') ? !!this.el.attr('multiple') : this._opt.multi;
}
var _setFunc = this['_setHtml_' + this._tag];
if (_setFunc) {
_setFunc.call(this);
}
if (this._opt.full) {
this._wrap.addClass('choose-flex');
}
this._wrap.addClass(this._opt.skin);
if (this.multi && !this._opt.skin)
this._wrap.addClass('choose-type-right');
this._bindEvent();
},
_setHtml_ul: function() {
this._wrap = this.el;
this._items = this.el.children('li');
if (this._opt.itemWidth) {
this._items.css('width', this._opt.itemWidth);
}
},
_setHtml_select: function() {
var _ohtml = '<ul class="ui-choose">';
this.el.find('option').each(function(index, el) {
var _this = $(el),
_text = _this.text(),
_value = _this.prop('value'),
_selected = _this.prop('selected') ? 'selected' : '',
_disabled = _this.prop('disabled') ? ' disabled' : '';
_ohtml += '<li title="' + _text + '" data-value="' + _value + '" class="' + _selected + _disabled + '">' + _text + '</li> ';
});
_ohtml += '</ul>';
this.el.after(_ohtml);
this._wrap = this.el.next('ul.ui-choose');
this._items = this._wrap.children('li');
if (this._opt.itemWidth) {
this._items.css('width', this._opt.itemWidth);
}
this.el.hide();
},
_bindEvent: function() {
var _this = this;
_this._wrap.on('click', 'li', function() {
var _self = $(this);
if (_self.hasClass('disabled'))
return;
if (!_this.multi) { // single select
var _val = _self.attr('data-value') || _self.index();
_this.val(_val);
_this._triggerClick(_val, _self);
} else { // multiple
_self.toggleClass(_this._opt.active);
var _val = [];
_this._items.each(function(index, el) {
var _el = $(this);
if (_el.hasClass(_this._opt.active)) {
var _valOrIndex = _this._tag == 'select' ? _el.attr('data-value') : _el.index();
_val.push(_valOrIndex);
}
});
_this.val(_val);
_this._triggerClick(_val, _self);
}
});
return _this;
},
_triggerChange: function(value, item) {
item = item || this._wrap;
this.change(value, item);
if (typeof this._opt.change == 'function')
this._opt.change.call(this, value, item);
},
_triggerClick: function(value, item) {
this.click(value, item);
if (typeof this._opt.click == 'function')
this._opt.click.call(this, value, item);
},
_val_select: function(value) {
// getValue
if (arguments.length === 0) {
return this.el.val();
}
// setValue
var _oValue = this.el.val();
if (!this.multi) { // single select
var _selectedItem = this._wrap.children('li[data-value="' + value + '"]');
if (!_selectedItem.length)
return this;
this.el.val(value);
_selectedItem.addClass(this._opt.active).siblings('li').removeClass(this._opt.active);
if (value !== _oValue) {
this._triggerChange(value);
}
} else { // multiple select
if (value == null || value == '' || value == []) {
this.el.val(null);
this._items.removeClass(this._opt.active);
} else {
value = typeof value == 'object' ? value : [value];
this.el.val(value);
this._items.removeClass(this._opt.active);
for (var i in value) {
var _v = value[i];
this._wrap.children('li[data-value="' + _v + '"]').addClass(this._opt.active);
}
}
if (value !== _oValue) {
this._triggerChange(value);
}
}
// multiple
return this;
},
_val_ul: function(index) {
// getValue
if (arguments.length === 0) {
var _oActive = this._wrap.children('li.' + this._opt.active);
if (!this.multi) { // single select
return _oActive.index() == -1 ? null : _oActive.index();
} else { // single select
if (_oActive.length == 0) {
return null;
}
var _this = this,
_val = [];
_oActive.each(function(index, el) {
var _el = $(el);
if (_el.hasClass(_this._opt.active)) {
_val.push(_el.index());
}
});
return _val;
}
}
// setValue
var _oIndex = this._val_ul();
if (!this.multi) { // single select
var _selectedItem = this._wrap.children('li').eq(index);
if (!_selectedItem.length)
return this;
_selectedItem.addClass(this._opt.active).siblings('li').removeClass(this._opt.active);
if (index !== _oIndex) {
this._triggerChange(index, _selectedItem);
}
} else { // multiple select
if (index == null || index == '' || index == []) {
this._items.removeClass(this._opt.active);
} else {
index = typeof index == 'object' ? index : [index];
this._items.removeClass(this._opt.active);
for (var i in index) {
var _no = index[i];
this._wrap.children('li').eq(_no).addClass(this._opt.active);
}
}
if (index !== _oIndex) {
this._triggerChange(index);
}
}
// multiple
return this;
},
val: function() {
return this['_val_' + this._tag].apply(this, arguments);
},
change: function(value, item) {},
click: function(value, item) {},
hide: function() {
this._wrap.hide();
return this;
},
show: function() {
this._wrap.show();
return this;
},
selectAll: function() {
if (!this.multi)
return this;
if (this._tag == 'select') {
this.el.find('option').not(':disabled').prop('selected', true);
var _val = this.el.val();
this.val(_val);
} else {
var _val = [];
this._items.not('.disabled').each(function(index, el) {
_val.push(index);
});
this.val(_val);
}
return this;
}
};
}(jQuery);
