Добавить js/createSelectElement.md
This commit is contained in:
72
js/createSelectElement.md
Normal file
72
js/createSelectElement.md
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
# Создание выпадающего списка
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Пример работы
|
||||||
|
```js
|
||||||
|
attributes = {
|
||||||
|
"event":"addStatusTransport",
|
||||||
|
"attr_data":{
|
||||||
|
"brigade_id":document.getElementById("brigade_id").innerText,
|
||||||
|
"user1c_id":e.dataset.usesr1cId,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cElementBySelect(e.parentNode.nextElementSibling,status_transport,attributes);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
/**
|
||||||
|
* Создание вырадающего списка
|
||||||
|
*
|
||||||
|
* @param el - Элемент куда буде помещен созанный список
|
||||||
|
* @param data - объект с ключем и значением ([{value:text}])
|
||||||
|
* @param atttributes - Обект содержащий название события и аттридубыи data
|
||||||
|
*/
|
||||||
|
|
||||||
|
function cElementBySelect(el,data = {}, atttributes=null) {
|
||||||
|
select = document.createElement('select');
|
||||||
|
select.classList.add("form-select")
|
||||||
|
|
||||||
|
if(atttributes){
|
||||||
|
|
||||||
|
if('event' in atttributes){
|
||||||
|
|
||||||
|
select.addEventListener('change',window[atttributes.event])
|
||||||
|
}
|
||||||
|
|
||||||
|
if('attr_data' in atttributes){
|
||||||
|
|
||||||
|
Object.entries(atttributes.attr_data).forEach(([key, value]) => {
|
||||||
|
select.dataset[key] = value
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(Object.keys(data).length){
|
||||||
|
option = document.createElement('option');
|
||||||
|
option.value =0;
|
||||||
|
option.innerText = "";
|
||||||
|
select.append(option)
|
||||||
|
|
||||||
|
data.forEach((dt)=>{
|
||||||
|
option = document.createElement('option');
|
||||||
|
option.value =dt.value;
|
||||||
|
option.innerText = dt.text;
|
||||||
|
select.append(option)
|
||||||
|
})
|
||||||
|
|
||||||
|
elchild = el.querySelector("select") || null
|
||||||
|
|
||||||
|
if(!elchild){
|
||||||
|
el.append(select)
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
alert("Отсутствуют элементы для выпадающего списка");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user