From 8e517026f2b47ce80322e932d35e72f1bbc2c142 Mon Sep 17 00:00:00 2001
From: MaxOvs <rock_maksimus@mail.ru>
Date: Fri, 21 Oct 2022 16:17:37 +0300
Subject: [PATCH] Fix documentation and refactoring classes

---
 ...BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html | 26 ++++---
 documentation/DropDown.html                   | 27 +++++---
 documentation/cg-dropdown.js.html             | 26 ++++---
 documentation/create-element.js.html          | 25 ++++---
 documentation/global.html                     | 26 ++++---
 documentation/index.html                      | 26 ++++---
 documentation/module-Utils.html               | 25 ++++---
 documentation/module-createElementChips.html  | 67 ++++++++++++++++++-
 documentation/utils.js.html                   | 25 ++++---
 package.json                                  |  2 +-
 src/cg-dropdown.js                            | 37 +++++-----
 src/components/create-element.js              | 24 +++++++
 src/index.html                                |  2 +-
 src/index.js                                  | 26 +++----
 14 files changed, 253 insertions(+), 111 deletions(-)

diff --git a/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html b/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
index 794880a..01b0d30 100644
--- a/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
+++ b/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
@@ -112,16 +112,24 @@
           >
         </li>
       </ul>
-      <h3>Global</h3>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-Utils.html">Utils</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
+      </ul>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/DropDown.html b/documentation/DropDown.html
index d793dec..386878f 100644
--- a/documentation/DropDown.html
+++ b/documentation/DropDown.html
@@ -122,16 +122,24 @@
           >
         </li>
       </ul>
-      <h3>Global</h3>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-Utils.html">Utils</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
+      </ul>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
@@ -141,7 +149,6 @@
         <li><a href="global.html#selectIndex">selectIndex</a></li>
       </ul>
     </nav>
-
     <br class="clear" />
 
     <footer>
diff --git a/documentation/cg-dropdown.js.html b/documentation/cg-dropdown.js.html
index 3475c4d..ef40621 100644
--- a/documentation/cg-dropdown.js.html
+++ b/documentation/cg-dropdown.js.html
@@ -634,16 +634,24 @@ export class DropDown {
           >
         </li>
       </ul>
-      <h3>Global</h3>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-Utils.html">Utils</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
+      </ul>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/create-element.js.html b/documentation/create-element.js.html
index e629900..559c135 100644
--- a/documentation/create-element.js.html
+++ b/documentation/create-element.js.html
@@ -107,21 +107,24 @@ export function createBreadcrumb(data, title, index, id) {
           >
         </li>
       </ul>
-      <h3>Module</h3>
+      <h3>Modules</h3>
       <ul>
         <li><a href="module-Utils.html">Utils</a></li>
-        <li><a href="module-createElementChips.html">createBreadcrumb</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
       </ul>
-      <h3>Global</h3>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/global.html b/documentation/global.html
index ddcd9df..bf19d72 100644
--- a/documentation/global.html
+++ b/documentation/global.html
@@ -642,16 +642,24 @@
           >
         </li>
       </ul>
-      <h3>Global</h3>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-Utils.html">Utils</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
+      </ul>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/index.html b/documentation/index.html
index 1ce8330..a7bf70d 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -32,16 +32,24 @@
           >
         </li>
       </ul>
-      <h3>Global</h3>
+      <h3>Modules</h3>
+      <ul>
+        <li><a href="module-Utils.html">Utils</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
+      </ul>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/module-Utils.html b/documentation/module-Utils.html
index 51ca858..139982d 100644
--- a/documentation/module-Utils.html
+++ b/documentation/module-Utils.html
@@ -364,21 +364,24 @@
           >
         </li>
       </ul>
-      <h3>Module</h3>
+      <h3>Modules</h3>
       <ul>
         <li><a href="module-Utils.html">Utils</a></li>
-        <li><a href="module-createElementChips.html">createBreadcrumb</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
       </ul>
-      <h3>Global</h3>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/module-createElementChips.html b/documentation/module-createElementChips.html
index 5fc573c..55412e7 100644
--- a/documentation/module-createElementChips.html
+++ b/documentation/module-createElementChips.html
@@ -15,7 +15,7 @@
 
   <body>
     <div id="main">
-      <h1 class="page-title">Module: createElementChips</h1>
+      <h1 class="page-title">Module: createBreadcrumb</h1>
 
       <section>
         <header></header>
@@ -113,6 +113,69 @@
               <span class="param-type">HTMLElement</span>
             </dd>
           </dl>
+
+          <h4 class="name" id=".createNativeSelect">
+            <span class="type-signature">(static) </span>createNativeSelect<span class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {HTMLSelectElement}</span>
+          </h4>
+
+          <div class="description">Метод который создает нативный селект</div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="create-element.js.html">create-element.js</a>,
+                  <a href="create-element.js.html#line77">line 77</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">Возвращает созданный нативный селект</div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">HTMLSelectElement</span>
+            </dd>
+          </dl>
+
+          <h4 class="name" id=".createNativSelectOption">
+            <span class="type-signature">(static) </span>createNativSelectOption<span
+              class="signature"
+              >()</span
+            ><span class="type-signature"> &rarr; {HTMLOptionElement}</span>
+          </h4>
+
+          <div class="description">Метод который создает Options для нативного селекта</div>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="create-element.js.html">create-element.js</a>,
+                  <a href="create-element.js.html#line90">line 90</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">Возвращает созданные Options нативного селекта</div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">HTMLOptionElement</span>
+            </dd>
+          </dl>
         </article>
       </section>
     </div>
@@ -132,7 +195,7 @@
       <h3>Module</h3>
       <ul>
         <li><a href="module-Utils.html">Utils</a></li>
-        <li><a href="module-createElementChips.html">createBreadcrumb</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
       </ul>
       <h3>Global</h3>
       <ul>
diff --git a/documentation/utils.js.html b/documentation/utils.js.html
index 0f22e40..b447813 100644
--- a/documentation/utils.js.html
+++ b/documentation/utils.js.html
@@ -153,21 +153,24 @@ export function getFormatItem(dataItem, index) {
           >
         </li>
       </ul>
-      <h3>Module</h3>
+      <h3>Modules</h3>
       <ul>
         <li><a href="module-Utils.html">Utils</a></li>
-        <li><a href="module-createElementChips.html">createBreadcrumb</a></li>
+        <li><a href="module-createElementChips.html">createElementChips</a></li>
       </ul>
-      <h3>Global</h3>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+      </ul>
+      <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/package.json b/package.json
index 6ca660a..ae3f2ae 100644
--- a/package.json
+++ b/package.json
@@ -21,4 +21,4 @@
     "parcel": "^2.7.0",
     "prettier": "^2.7.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index b93d433..fe38e67 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -6,7 +6,11 @@ import {
   nativOptionMultiple,
   nativOptionOrdinary,
 } from './components/utils';
-import { createBreadcrumb, createListSelect } from './components/create-element';
+import {
+  createBreadcrumb,
+  createNativSelectOption,
+  createNativeSelect,
+} from './components/create-element';
 
 /**
  * @class Описание класса DropDown
@@ -344,11 +348,8 @@ export class DropDown {
     }
 
     const ulList = document.createElement('ul');
-    const nativSelect = document.createElement('select');
+    const nativSelect = createNativeSelect();
 
-    nativSelect.setAttribute('form', 'data');
-
-    nativSelect.classList.add('nativSelect');
     ulList.classList.add('list');
 
     if (styles) {
@@ -357,15 +358,14 @@ export class DropDown {
     }
 
     this.#element.appendChild(ulList);
-    ///
-    this.#element.appendChild(nativSelect);
 
     this.#items.forEach((dataItem) => {
+      this.#element.appendChild(nativSelect);
+
       const liItem = document.createElement('li');
-      const nativOption = document.createElement('option');
+      const nativOption = createNativSelectOption();
       const strongItem = document.createElement('strong');
 
-      nativOption.classList.add('nativSelect__nativOption');
       liItem.classList.add('list__item');
       strongItem.classList.add('category');
 
@@ -375,21 +375,17 @@ export class DropDown {
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
 
         liItem.appendChild(checkBox);
-
         nativSelect.setAttribute('multiple', 'multiple');
       }
-      nativSelect.setAttribute('name', 'dataSelect');
 
       let textNode = '';
 
       if (dataItem.title) {
-        textNode = document.createTextNode(dataItem.title);
-        ///
         nativOption.text = dataItem.title;
         nativOption.value = dataItem.title;
-        nativSelect.appendChild(nativOption);
+        textNode = document.createTextNode(dataItem.title);
 
-        ///
+        nativSelect.appendChild(nativOption);
         liItem.appendChild(textNode);
         ulList.appendChild(liItem);
       } else {
@@ -429,6 +425,8 @@ export class DropDown {
     const response = await fetch(url);
     const dataUrl = await response.json();
 
+    const nativSelect = createNativeSelect();
+
     dataUrl.forEach((dataItem, index) => {
       const item = {
         id: dataItem.id,
@@ -436,6 +434,8 @@ export class DropDown {
         value: index,
       };
       const ulUrl = this.#element.querySelector('.list');
+
+      const nativOption = createNativSelectOption();
       const liUrl = document.createElement('li');
       const textUrl = document.createTextNode(item.title);
 
@@ -444,17 +444,24 @@ export class DropDown {
         checkBox.type = 'checkbox';
 
         checkBox.setAttribute('id', `chbox-${item.id}`);
+        nativSelect.setAttribute('multiple', 'multiple');
+
         liUrl.appendChild(checkBox);
       }
 
       liUrl.classList.add('list__item');
+      nativOption.value = item.title;
+      nativOption.text = item.title;
 
+      nativSelect.appendChild(nativOption);
       liUrl.appendChild(textUrl);
       ulUrl.appendChild(liUrl);
 
       this.#items.push(item);
     });
 
+    this.#element.appendChild(nativSelect);
+
     this.#items.filter((item, index) => {
       if (typeof item !== 'object') {
         this.#items.splice(index, 1);
diff --git a/src/components/create-element.js b/src/components/create-element.js
index 16bb051..3fb49ca 100644
--- a/src/components/create-element.js
+++ b/src/components/create-element.js
@@ -69,3 +69,27 @@ export function createBreadcrumb(data, title, index, id) {
 
   return liChip;
 }
+
+/**
+ * Метод который создает нативный селект
+ * @returns {HTMLSelectElement} Возвращает созданный нативный селект
+ */
+export function createNativeSelect() {
+  const nativSelect = document.createElement('select');
+
+  nativSelect.setAttribute('form', 'data');
+  nativSelect.setAttribute('name', 'dataSelect');
+  nativSelect.classList.add('nativSelect');
+  return nativSelect;
+}
+
+/**
+ * Метод который создает Options для нативного селекта
+ * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
+ */
+export function createNativSelectOption() {
+  const nativOption = document.createElement('option');
+
+  nativOption.classList.add('nativSelect__nativOption');
+  return nativOption;
+}
diff --git a/src/index.html b/src/index.html
index 8a5cae0..b312a03 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,7 @@
 
       <button class="cg-dropdown cg-dropdown_one"></button>
       <input type="submit" form="data" value="Отправить" />
-      <!-- <button class="cg-dropdown cg-dropdown_three"></button> -->
+      <button class="cg-dropdown cg-dropdown_three"></button>
 
       <!-- <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> -->
     </div>
diff --git a/src/index.js b/src/index.js
index 598da3e..e298383 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,19 +21,19 @@ const dropdown = new DropDown({
 
 dropdown.disabled(false);
 // ------------------------------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({