diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index 67769df..af7f7c2 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -342,7 +342,11 @@ export class DropDown {
}
const ulList = document.createElement('ul');
+ ///
+ const nativSelect = document.createElement('select');
+ nativSelect.setAttribute('form', 'data');
+ nativSelect.classList.add('nativSelect');
ulList.classList.add('list');
if (styles) {
@@ -351,11 +355,15 @@ export class DropDown {
}
this.#element.appendChild(ulList);
+ ///
+ this.#element.appendChild(nativSelect);
this.#items.forEach((dataItem) => {
const liItem = document.createElement('li');
+ const nativOption = document.createElement('option');
const strongItem = document.createElement('strong');
+ nativOption.classList.add('nativSelect__nativOption');
liItem.classList.add('list__item');
strongItem.classList.add('category');
@@ -371,6 +379,13 @@ export class DropDown {
if (dataItem.title) {
textNode = document.createTextNode(dataItem.title);
+ ///
+ nativOption.text = dataItem.title;
+ nativOption.value = dataItem.title;
+ nativSelect.setAttribute('name', 'dataSelect');
+ nativSelect.appendChild(nativOption);
+
+ ///
liItem.appendChild(textNode);
ulList.appendChild(liItem);
} else {
@@ -488,6 +503,7 @@ export class DropDown {
const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected');
+ const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
const ul = document.createElement('ul');
@@ -562,6 +578,11 @@ export class DropDown {
} else {
select.innerText = item.title;
this.#selectedItems = item;
+ nativOption.forEach((op) => {
+ if (op.textContent === item.title) {
+ op.setAttribute('selected', 'selected');
+ }
+ });
options.forEach((option) => {
option.classList.remove('active');
diff --git a/src/index.html b/src/index.html
index 9d6e368..549a222 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,14 +6,17 @@
Cg-Select
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
index ed3c042..01044ae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,70 +15,66 @@ const dropdown = new DropDown({
'MAN',
'max',
],
- multiselect: true,
- multiselectTag: true,
});
-dropdown.deleteItem(2);
-
// ------------------------------URL--------------------
-const dropdown3 = new DropDown({
- selector: '.cg-dropdown_three',
- placeholder: 'URL',
- url: 'http://jsonplaceholder.typicode.com/users',
- styles: {
- head: {
- background: 'black',
- width: '350px',
- },
- },
- multiselect: true,
- multiselectTag: true,
-});
+// const dropdown3 = new DropDown({
+// selector: '.cg-dropdown_three',
+// placeholder: 'URL',
+// url: 'http://jsonplaceholder.typicode.com/users',
+// styles: {
+// head: {
+// background: 'black',
+// width: '350px',
+// },
+// },
+// multiselect: true,
+// multiselectTag: true,
+// });
// --------------------------------Категории--------------------------
-const dropdown4 = new DropDown({
- selector: '.cg-dropdown_button',
- placeholder: 'Выберите регион',
- items: [
- {
- category: 'Russia',
- categoryItems: [
- {
- id: '28qwds',
- title: 'Москва',
- value: 0,
- },
- ,
- 'Ростов-на-дону',
- 'Саратов',
- 'Волгоград',
- 'Донецк',
- ],
- },
- {
- category: 'USA',
- categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
- },
- {
- category: 'France',
- categoryItems: ['Paris'],
- },
- ],
- styles: {
- head: {
- background: 'red',
- },
- list: {
- background: 'green',
- },
- chips: {
- background: 'blue',
- },
- },
- multiselect: true,
- multiselectTag: true,
-});
+// const dropdown4 = new DropDown({
+// selector: '.cg-dropdown_button',
+// placeholder: 'Выберите регион',
+// items: [
+// {
+// category: 'Russia',
+// categoryItems: [
+// {
+// id: '28qwds',
+// title: 'Москва',
+// value: 0,
+// },
+// ,
+// 'Ростов-на-дону',
+// 'Саратов',
+// 'Волгоград',
+// 'Донецк',
+// ],
+// },
+// {
+// category: 'USA',
+// categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
+// },
+// {
+// category: 'France',
+// categoryItems: ['Paris'],
+// },
+// ],
+// styles: {
+// head: {
+// background: 'red',
+// },
+// list: {
+// background: 'green',
+// },
+// chips: {
+// background: 'blue',
+// },
+// },
+// multiselect: true,
+// multiselectTag: true,
+// });
//----------------управление с помощью кнопок----------------------------------
/* const buttonOpen = document.querySelector('.button__open');
diff --git a/src/style/nativSelect.scss b/src/style/nativSelect.scss
new file mode 100644
index 0000000..c864dd0
--- /dev/null
+++ b/src/style/nativSelect.scss
@@ -0,0 +1,13 @@
+.nativSelect {
+ border: none;
+ cursor: pointer;
+ display: none;
+ color: white;
+ background: #2a2f3b;
+ box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
+ border-radius: 5px;
+
+ &__nativOption {
+ border: 1px #0a0b0e solid;
+ }
+}