|
select multiple
#38863560
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
|
|
|
Более улучшенный вариант с прокруткой. Также добавлена функция "Выделить всё" 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
<!DOCTYPE html>
<html>
<head>
<title>CheckCombobox</title>
<style>
* {margin:0; padding:0;}
.CheckCombobox {
background:#fff;
font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
width:150px;
}
.CheckCombobox .DivForInput {
margin:0;
padding:0 0 0 4px;
height:19px;
overflow:hidden;
border:1px solid #B5B8C8;
}
.CheckCombobox .DivForInput input {
font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
margin:0; padding:0; border:0;
outline:none;
height:19px;
line-height:18px;
float:left;
}
.cmdList {
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAIAAAAP9fodAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAOJJREFUOE+9kEEKgmAQhes4LSJcBh0hqluVxwk6QttKCoNUcFtp4kJFd73XkPymLYagh8w/vnnfP2h/vdlOxoOeVsAeevV+xWKNuC3Si9jdkKyM4rj25NV0MGpg+DVlWVZVhYoe47Yj1xG7vYSXoiishT2cLkezFcgkSVDRw4GPKTISJnZ9C99Y55DGWmHkFkzrJLGLoTAM8zyXtDzo4cA3Y8TOTQVBkGVZvQc9HDPiui4xHB/yfZLW3EZF3w4QO3XJ87w0TVE7p8SOX4QlnRPHcYjh0IrYQS9ie72I7fT6L/YELEZQH9hMDiwAAAAASUVORK5CYII=') no-repeat 0 0;
width:18px;
height:20px;
cursor:pointer;
float:right;
}
.CheckCombobox .CheckCont {position:absolute; margin-top:-9999px;}
.CheckCombobox .CheckContFocused {
display:block;
position:absolute;
margin-top:-1px;
z-index:2;
background:#fff;
border:1px solid #B5B8C8;
outline:none;
white-space:nowrap;
overflow-y:auto;
overflow-x:hidden;
}
.CheckCombobox .CheckTable {border-collapse:collapse;}
.CheckCombobox td {padding:5px !important;}
.CheckCombobox input[type="checkbox"] {position:absolute; left:-9999px;}
.CheckCombobox input[type="checkbox"] + a {
padding-left:16px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYklEQVQoz43RsQ2AQAwDQMfOGmzANBT0jEJLyUKsRsFDvsHgLtLFUpQYphU/kgCObb4GtkhKSZkpidS47Hw23hBJAPxEpJrzqPo86p1D5TzqnUMRt/MoIqrPo7rDIwDx878ncvgH6gjXVecAAAAASUVORK5CYII=') no-repeat;
}
.CheckCombobox input[type="checkbox"]:checked + a {
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnElEQVQoz43ROwoCMRAG4P/hNbyAnQiCWHgFEQsLwbN4gz2KjY29pYgIeh2LCUl0d2WnCCT5MpNMON4cMSBGAK7NPiakImxLjlHS5NAon+hDkgDoD5qeZrGWXB8CECmTC7S8rH5QbJEszjaA+XlRo/fuRbLkixyx10ZkqWvb9/Utv71GpW5uwXP7aKP6fqlPkjvR13tDdyIAHPi/H8GqHHTeOs1YAAAAAElFTkSuQmCC') no-repeat;
}
</style>
</head>
<body onload="SetCheckCombobox();">
<div style="margin:5px;">DIV просто так</div>
<br>
<table><tr>
<td>           </td>
<td> <div class="CheckCombobox">Исполнение,Поддержка,Управление карьерой подчинённых,Участие в наборе персонала,Строка 1,Строка 2,Строка 3,Строка 4</div> </td>
<td>               </td>
<td> <div class="CheckCombobox" id="ProjStatus">Open,Closed,On hold</div> </td>
<td>  <button onclick="SelectAllCheckContClick(gid('ProjStatus'))">Выделить всё</button> </td>
</tr></table>
<br>
<div style="margin:5px;">DIV просто так</div>
<script>
function gid(idx) {return document.getElementById(idx);}
function GetScrollWidth() {
var div = document.createElement('div');
div.style.overflowY = 'scroll';
div.style.width = '50px'; div.style.height = '50px';
div.style.visibility = 'hidden';
document.body.appendChild(div);
var sw = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
return sw;
}
var ScrollWidth = GetScrollWidth();
function SetCheckCombobox() {
var d = document.getElementsByClassName('CheckCombobox');
for (i=0; i < d.length; i++) {
var s = '<div class="DivForInput"> <input type="text" readonly> <div class="cmdList" onclick="ShowCheckCont(this);"></div> </div>' +
'<div class="CheckCont">' +
'<table class="CheckTable"><tbody>' +
'<tr><td> <label><input type="checkbox" onclick="SelectAllCheckCont(this);"><a>(Выделить всё)</a></label> </td></tr>';
var arr = d[i].innerHTML.split(',');
for (j=0; j < arr.length; j++) {s = s + '<tr><td> <label><input type="checkbox" onclick="GetJoinStringCheckCont(this)"><a>' + arr[j] + '</a></label> </td></tr>';}
s = s + '</tbody></table></div>';
d[i].innerHTML = s;
d[i].children[0].style.width = d[i].offsetWidth - 4 + 'px';
d[i].children[0].children[0].style.width = d[i].offsetWidth - 25 + 'px';
var el = d[i].children[1]; // Тот самый выпающий список
el.style.minWidth = d[i].offsetWidth + 'px';
el.style.maxHeight = '200px';
if (el.offsetHeight < el.scrollHeight) {el.style.width = el.offsetWidth + ScrollWidth + 'px';}
// Добавим события к выпадающему списку
el.addEventListener('focus', onCheckContFocus, true);
el.addEventListener('blur', onCheckContBlur, true);
}
}
function SelectAllCheckContClick(el) {
var chk = el.children[1].children[0].children[0].children[0].children[0].children[0].children[0];
chk.checked = true;
SelectAllCheckCont(chk);
}
function SelectAllCheckCont(el) {
var rows = el.parentNode.parentNode.parentNode.parentNode.parentNode.rows;
for (j=1; j < rows.length; j++) {rows[j].cells[0].children[0].children[0].checked = el.checked;}
GetJoinStringCheckCont(el);
}
function GetJoinStringCheckCont(el) {
var rows = el.parentNode.parentNode.parentNode.parentNode.parentNode.rows;
var s = '';
for (j=1; j < rows.length; j++) {
if (rows[j].cells[0].children[0].children[0].checked) {s = s + ',' + rows[j].cells[0].children[0].children[1].innerHTML};
}
el.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.children[0].children[0].value = s.substring(1);
}
function ShowCheckCont(el) {
el = el.parentNode.parentNode.children[1];
el.className = 'CheckContFocused';
el.tabIndex = '-1'; el.focus();
}
function onCheckContFocus() {this.className = 'CheckContFocused';}
function onCheckContBlur() {this.className = 'CheckCont';}
</script>
</body>
</html>
|
|
|
