https://www.powerlaptop.ro/javascript/iselector.js?cra=307555

1/*
2	ISSelectReplacement
3*/
4if(typeof(ISSelectReplacement) == 'undefined') {
5	var ISSelectReplacement = {
6		init: function()
7		{
8			if(window.addEventListener)
9				window.addEventListener('load', ISSelectReplacement.on_load, false);
10			else
11				window.attachEvent('onload', ISSelectReplacement.on_load);
12		},
13
14		on_load: function()
15		{
16			var selects = document.getElementsByTagName('SELECT');
17			if(!selects) return false;
18
19			for(var i = 0; i < selects.length; i++)
20			{
21				var select = selects[i];
22				if(!select.multiple || select.className.indexOf('ISSelectReplacement') == -1 || select.className.indexOf('ISSelectAlreadyReplaced') != -1) continue; // Only multiple selects are supported
23
24				ISSelectReplacement.replace_select(selects[i]);
25			}
26		},
27		replace_select: function(element)
28		{
29			var name = element.name;
30
31			element.style.visibility = 'hidden';
32
33			// Start whipping up our replacement
34			var replacement = document.createElement('DIV');
35			replacement.className = "ISSelect "+element.className;
36			replacement.className += " ISSelectAlreadyReplaced";
37			var hideSelectReplacement = false;
38			// If the offsetHeight is 0, this select is hidden
39			if(element.offsetHeight == 0)
40			{
41				var clone = element.cloneNode(true);
42				clone.style.position = 'absolute';
43				clone.style.left = '-10000px';
44				clone.style.top = '-10000px';
45				clone.style.display = 'block';
46				document.body.appendChild(clone);
47				offset_height = clone.offsetHeight+"px";
48				offset_width = clone.offsetWidth+"px";
49				clone.parentNode.removeChild(clone);
50				if(element.style.display && element.style.display == 'none') {
51					var hideSelectReplacement = true;
52				}
53			}
54			else
55			{
56				offset_height = element.offsetHeight+"px";
57				offset_width = element.offsetWidth+"px";
58			}
59			var style_offset_width = ISSelectReplacement.get_prop(element, 'width');
60			if(style_offset_width && style_offset_width != "auto") offset_width = style_offset_width;
61			var style_offset_height = ISSelectReplacement.get_prop(element, 'height');
62			if(style_offset_height && style_offset_height != "auto") offset_height = style_offset_height;
63			replacement.style.height = offset_height;
64
65			if(parseInt(offset_width) < 200) {
66				offset_width = '200px';
67			}
68			replacement.style.width = offset_width;
69			if(element.id)
70			{
71				replacement.id = element.id;
72				element.id += "_old";
73			}
74			if(hideSelectReplacement) {
75				replacement.style.display = 'none';
76			}
77			replacement.select = element;
78			replacement.options = element.options;
79			replacement.selectedIndex = element.selectedIndex;
80			this.select = element;
81			this.replacement = replacement;
82
83			if(element.onchange)
84			{
85				replacement.onclick = function()
86				{
87					$(this.select).trigger('change');
88				}
89			}
90
91			if(element.ondblclick)
92			{
93				replacement.ondblclick = function()
94				{
95					$(this.select).trigger('dblclick');
96				}
97			}
98
99			var innerhtml = '<ul>';
100
101			// Loop de loop
102			for(var i = 0; i < element.childNodes.length; i++)
103			{
104				if(!element.childNodes[i].tagName || element.nodeType == 3) continue;
105				if(element.childNodes[i].tagName == "OPTGROUP")
106				{
107					innerhtml += ISSelectReplacement.add_group(element, element.childNodes[i], i);
108				}
109				else if(element.childNodes[i].tagName == "OPTION")
110				{
111					innerhtml += ISSelectReplacement.add_option(element, element.childNodes[i], i);
112				}
113			}
114
115			innerhtml += '</ul>';
116			replacement.innerHTML = innerhtml;
117
118			element.parentNode.insertBefore(replacement, element);
119			element.style.display = 'none';
120		},
121
122		get_prop: function(element, prop)
123		{
124			if(element.currentStyle)
125			{
126				return element.currentStyle[prop];
127			}
128			else if(document.defaultView && document.defaultView.getComputedStyle)
129			{
130				prop = prop.replace(/([A-Z])/g,"-$1");
131				prop = prop.toLowerCase();
132				return document.defaultView.getComputedStyle(element, "").getPropertyValue(prop);
133			}
134		},
135
136		add_group: function(select, group, group_id)
137		{
138			var extraClass = '';
139			if(group.className) {
140				extraClass = group.className;
141			}
142			group_html = '<li class="ISSelectGroup '+extraClass+'">' +
143				'<div>'+group.label+'</div>';
144
145			if(group.childNodes)
146			{
147				group_html += '<ul>';
148				for(var i = 0; i < group.childNodes.length; i++)
149				{
150					if(!group.childNodes[i].tagName || group.childNodes[i].nodeType == 3) continue;
151					group_html += ISSelectReplacement.add_option(select, group.childNodes[i], [group_id, i]);
152				}
153				group_html += '</ul>';
154			}
155
156			group_html += '</li>';
157			return group_html;
158		},
159
160		add_option: function(select, option, id)
161		{
162			var value, element_class, checked = '';
163			if(option.selected)
164			{
165				element_class = "SelectedRow";
166				checked = 'checked="checked"'
167			}
168			else {
169				element_class = '';
170			}
171
172			if(option.className) {
173				element_class += ' '+option.className;
174			}
175
176			var label = option.innerHTML;
177			var whitespace = label.match(/^\s*(&nbsp;)*/);
178			if(whitespace[0])
179			{
180				label = label.replace(/^\s*(&nbsp;)*/, '');
181			}
182			var disabled = '';
183			if(this.select.disabled) {
184				var disabled = ' disabled="disabled"';
185			}
186
187			var extraKey = '';
188			var extra = '';
189			if(option.className && option.className.indexOf('forceKey') != -1) {
190				var start = option.className.indexOf('forceKey');
191				var end = option.className.indexOf(' ', start+1);
192				if(end == -1) {
193					var end = option.className.length;
194				}
195				var extraKey = option.className.substring(start+8, end);
196				var extra = '[]';
197			}
198			html = '<li id="ISSelect'+select.name.replace('[]', '')+'_'+option.value+'" class="'+element_class+'" onselectstart="return false;" style="-moz-user-select: none;" onmouseover="ISSelectReplacement.on_hover(this, \''+id+'\', \'over\');"' +
199				'onmouseout=\"ISSelectReplacement.on_hover(this, \''+id+'\', \'out\');" onclick="ISSelectReplacement.on_click(this, \''+id+'\');">' + whitespace[0];
200			if($(option).hasClass('freeform')) {
201				html +=	'<input type="textbox" name="ISSelectReplacement_'+select.name+'['+extraKey+']'+extra+'" value="' + option.value + '" onclick="ISSelectReplacement.on_click(this, \''+id+'\');" />';
202			}
203			else {
204				html += '<input type="checkbox" name="ISSelectReplacement_'+select.name+'['+extraKey+']'+extra+'" value="'+option.value+'" '+checked+disabled+'" onclick="ISSelectReplacement.on_click(this, \''+id+'\');" />' + label;
205			}
206			html += '</li>';
207			return html;
208		},
209
210		on_hover: function(element, id, action)
211		{
212			var id = id.split(',');
213
214			// Selected an option group child
215			if(id.length == 2)
216			{
217				var replacement = element.parentNode.parentNode.parentNode.parentNode.nextSibling;
218				var option = replacement.childNodes[id[0]].childNodes[id[1]];
219			}
220			else
221			{

222				var replacement = element.parentNode.parentNode.nextSibling;
223				var option = replacement.childNodes[id[0]];
224			}
225
226			if(action == 'out') {
227				$(element).removeClass('ISSelectOptionHover');
228				$(option).trigger('mouseout');
229			}
230			else {
231				if(!$(element).hasClass('SelectedRow')) {
232					$(element).addClass('ISSelectOptionHover');
233				}
234				$(option).trigger('mouseover');
235			}
236		},
237
238		scrollToItem: function(select_name, value, group)
239		{
240			var item = 'ISSelect'+select_name.replace('[]', '')+'_'+value;
241			if(!document.getElementById(item))
242				return;
243
244			var obj = document.getElementById(item);
245			var top = obj.offsetTop-4;
246			if(typeof(group) != 'undefined') {
247				top -= 20;
248			}
249
250			while(obj && obj.tagName != 'DIV')
251			{
252				obj = obj.parentNode;
253				if(obj && obj.tagName == 'DIV') {
254					obj.scrollTop = top;
255					break;
256				}
257			}
258		},
259
260		on_click: function(element, id)
261		{
262			if(element.dblclicktimeout)
263			{
264				return false;
265			}
266			if(element.tagName == "INPUT")
267			{
268				var checkbox = element;
269				if(checkbox.disabled) {
270					return false;
271				}
272				var element = element.parentNode;
273			}
274			else
275			{
276				var checkbox = element.getElementsByTagName('input')[0];
277				if(checkbox.disabled) {
278					return false;
279				}
280				checkbox.checked = !checkbox.checked;
281			}
282
283			element.dblclicktimeout = setTimeout(function() { element.dblclicktimeout = ''; }, 250);
284
285			var id = id.split(',');
286
287			// Selected an option group child
288			if(id.length == 2)
289			{
290				var replacement = element.parentNode.parentNode.parentNode.parentNode.nextSibling;
291				var option = replacement.childNodes[id[0]].childNodes[id[1]];
292			}
293			else
294			{
295				var replacement = element.parentNode.parentNode.nextSibling;
296				var option = replacement.childNodes[id[0]];
297			}
298
299			option.selected = checkbox.checked;
300			$(element).parents('div')[0].selectedIndex = replacement.selectedIndex;
301			
302			$(option).triggerHandler('click');
303			
304			if (checkbox.checked) {
305				$(element).addClass('SelectedRow');
306			}
307			else {
308				$(element).removeClass('SelectedRow');
309			}
310		}
311	};
312
313	ISSelectReplacement.init();
314}