0

помогите пожалуйста, как сделать этим селектом валидировать при отправке формы и брать выбор инпут, и открывать скрывать определенный блок при выборе селекта

const SELECT = '[data-select]'
const SELECT_LIST = '[data-select-list]'
const SELECT_ARROW = '[data-select-arrow]'
const SELECT_ACTION = '[data-select-action]'
const SELECT_TITLE = '[data-select-title]'
const SELECT_INPUT = '[data-select-input]'
const SELECT_ITEM = 'selectItem'
const OPEN_SELECT = 'selectOpen'

class Select {
  static attach() {
    document.querySelectorAll(SELECT)
      .forEach(select => new Select().init(select))
  }

  init(select) {
    if (this.findSelect(select)) {
      this.applyListener()
    }
  }

  applyListener() {
    document.querySelector('*').addEventListener('click', e => {
      const element = this.select.contains(e.target) && e.target.closest(SELECT_ACTION)

      if (this.isCallSelectElement(element)) {
        if (this.isOpened()) {
          this.closeSelectList();
        } else {
          this.openSelectList()
        }
      }

      if (this.isCallSelectItemElement(element)) {
        this.addSelectedValue(element)
      }

      if (this.isCallSelectElement(element) !== true && this.selectOverlayIsClickedElement(element) !== true) {
        this.closeSelectList()
      }
    })
  }

  isCallSelectElement(element, target) {
    return element && OPEN_SELECT in element.dataset
  }

  isCallSelectItemElement(element, target) {
    return element && SELECT_ITEM in element.dataset
  }

  findSelect(select) {


    if (select) {
      this.select = select
      this.selectList = this.select.querySelector(SELECT_LIST)
      this.selectArrow = this.select.querySelector(SELECT_ARROW)
      this.selectTitle = this.select.querySelector(SELECT_TITLE)
      this.selectInput = this.select.querySelector(SELECT_INPUT)
      return true
    }
    return false
  }

  isOpened() {
    return this.selectList.classList.contains('select__list_opened')
  }

  openSelectList() {
    this.selectList.classList.add('select__list_opened')
    this.selectArrow.classList.add('select__arrow_rotate')
  }

  closeSelectList() {
    this.selectList.classList.remove('select__list_opened')
    this.selectArrow.classList.remove('select__arrow_rotate')
  }

  addSelectedValue(element) {
    this.selectTitle.innerHTML = element.innerHTML
    this.selectInput.value = element.innerHTML
  }

  selectOverlayIsClickedElement(element, target) {
    return element && 'select' in element.dataset
  }
}

Select.attach()
* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Roboto", sans-serif;
}

.selects-box {
  display: flex;
  flex-wrap: wrap;
}

.select {
  max-width: 280px;
  position: relative;
  width: 100%;
  margin: 20px;
}

.select__selected-item {
  background: #f4f4f4;
  padding: 10px 20px;
  border-radius: 4px;
  border: 2px solid #d8d8d8;
  color: #1e4dba;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select__selected-item:hover {
  cursor: pointer;
  background: #f9f9f9;
}

.select__arrow {
  transition: 0.3s;
}

.select__arrow_rotate {
  transform: rotate(90deg);
}

.select__list {
  border: 2px solid transparent;
  border-radius: 4px;
  position: absolute;
  width: 100%;
  top: 50px;
  z-index: 1;
  box-sizing: border-box;
  transition: 0.3s;
  overflow: auto;
  max-height: 0;
  opacity: 0;
}

.select__list_opened {
  max-height: 200px;
  border-color: #d8d8d8;
  opacity: 1;
}

.select__list-item {
  padding: 10px 20px;
  color: #6f6f6f;
  border-bottom: 1px solid #d8d8d8;
  background: #fff;
}

.select__list-item:hover {
  text-decoration: underline;
  cursor: pointer;
  background: #f9f9f9;
}

.select__list-item:first-child {
  border-radius: 2px 2px 0 0;
}

.select__list-item:last-child {
  border-bottom: none;
  border-radius: 0 0 2px 2px;
}

.select__input {
  display: none;
}
<div class="selects-box">
  <div class="select" data-select>
    <div class="select__selected-item" data-select-action data-select-open>
      <div class="select__selected-title" data-select-title>
        Choose item
      </div>
      <svg class="select__arrow" data-select-arrow width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 12L9 20L7 18L15 10" fill="#1E4DBA"/>
                    <path d="M17 12L15 14L7 6L9 4" fill="#1E4DBA"/>
                </svg>
    </div>
    <div class="select__list" data-select-list>
      <div class="select__list-item" data-select-action data-select-item>First item</div>
      <div class="select__list-item" data-select-action data-select-item>Second item</div>
      <div class="select__list-item" data-select-action data-select-item>Third item</div>
      <div class="select__list-item" data-select-action data-select-item>Fourth item</div>
      <div class="select__list-item" data-select-action data-select-item>Fifth item</div>
      <div class="select__list-item" data-select-action data-select-item>Sixth item</div>
      <div class="select__list-item" data-select-action data-select-item>Eight item</div>
      <div class="select__list-item" data-select-action data-select-item>Ninth item</div>
      <div class="select__list-item" data-select-action data-select-item>Tenth item</div>
    </div>
    <input class="select__input" type="text" data-select-input>
  </div>
</div>
<div class="selects-box">
  <div class="select" data-select>
    <div class="select__selected-item" data-select-action data-select-open>
      <div class="select__selected-title" data-select-title>
        Choose item
      </div>
      <svg class="select__arrow" data-select-arrow width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 12L9 20L7 18L15 10" fill="#1E4DBA"/>
                    <path d="M17 12L15 14L7 6L9 4" fill="#1E4DBA"/>
                </svg>
    </div>
    <div class="select__list" data-select-list>
      <div class="select__list-item" data-select-action data-select-item>First item</div>
      <div class="select__list-item" data-select-action data-select-item>Second item</div>
      <div class="select__list-item" data-select-action data-select-item>Third item</div>
      <div class="select__list-item" data-select-action data-select-item>Fourth item</div>
      <div class="select__list-item" data-select-action data-select-item>Fifth item</div>
      <div class="select__list-item" data-select-action data-select-item>Sixth item</div>
      <div class="select__list-item" data-select-action data-select-item>Eight item</div>
      <div class="select__list-item" data-select-action data-select-item>Ninth item</div>
      <div class="select__list-item" data-select-action data-select-item>Tenth item</div>
    </div>
    <input class="select__input" type="text" data-select-input>
  </div>
</div>

1 ответ 1

0

дописал скрипт, теперь в value прописывается текст

const SELECT = '[data-select]'
const SELECT_LIST = '[data-select-list]'
const SELECT_ARROW = '[data-select-arrow]'
const SELECT_ACTION = '[data-select-action]'
const SELECT_TITLE = '[data-select-title]'
const SELECT_INPUT = '[data-select-input]'
const SELECT_ITEM = 'selectItem'
const OPEN_SELECT = 'selectOpen'

class Select {
  static attach() {
    document.querySelectorAll(SELECT)
      .forEach(select => new Select().init(select))
  }

  init(select) {
    if (this.findSelect(select)) {
      this.applyListener()
    }
  }

  applyListener() {
    document.querySelector('*').addEventListener('click', e => {
      const element = this.select.contains(e.target) && e.target.closest(SELECT_ACTION)

      if (this.isCallSelectElement(element)) {
        if (this.isOpened()) {
          this.closeSelectList();
        } else {
          this.openSelectList()
        }
      }

      if (this.isCallSelectItemElement(element)) {
        this.addSelectedValue(element)
      }

      if (this.isCallSelectElement(element) !== true && this.selectOverlayIsClickedElement(element) !== true) {
        this.closeSelectList()
      }
    })
  }

  isCallSelectElement(element, target) {
    return element && OPEN_SELECT in element.dataset
  }

  isCallSelectItemElement(element, target) {
    return element && SELECT_ITEM in element.dataset
  }

  findSelect(select) {


    if (select) {
      this.select = select
      this.selectList = this.select.querySelector(SELECT_LIST)
      this.selectArrow = this.select.querySelector(SELECT_ARROW)
      this.selectTitle = this.select.querySelector(SELECT_TITLE)
      this.selectInput = this.select.querySelector(SELECT_INPUT)
      return true
    }
    return false
  }

  isOpened() {
    return this.selectList.classList.contains('select__list_opened')
  }

  openSelectList() {
    this.selectList.classList.add('select__list_opened')
    this.selectArrow.classList.add('select__arrow_rotate')
  }

  closeSelectList() {
    this.selectList.classList.remove('select__list_opened')
    this.selectArrow.classList.remove('select__arrow_rotate')
  }

  addSelectedValue(element) {
    this.selectTitle.innerHTML = element.innerHTML;
    this.selectInput.value = element.innerHTML;
    this.selectInput.setAttribute('value', this.selectInput.value);
  }
  
  selectOverlayIsClickedElement(element, target) {
    return element && 'select' in element.dataset
  }
}

Select.attach()
* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Roboto", sans-serif;
}

.selects-box {
  display: flex;
  flex-wrap: wrap;
}

.select {
  max-width: 280px;
  position: relative;
  width: 100%;
  margin: 20px;
}

.select__selected-item {
  background: #f4f4f4;
  padding: 10px 20px;
  border-radius: 4px;
  border: 2px solid #d8d8d8;
  color: #1e4dba;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select__selected-item:hover {
  cursor: pointer;
  background: #f9f9f9;
}

.select__arrow {
  transition: 0.3s;
}

.select__arrow_rotate {
  transform: rotate(90deg);
}

.select__list {
  border: 2px solid transparent;
  border-radius: 4px;
  position: absolute;
  width: 100%;
  top: 50px;
  z-index: 1;
  box-sizing: border-box;
  transition: 0.3s;
  overflow: auto;
  max-height: 0;
  opacity: 0;
}

.select__list_opened {
  max-height: 200px;
  border-color: #d8d8d8;
  opacity: 1;
}

.select__list-item {
  padding: 10px 20px;
  color: #6f6f6f;
  border-bottom: 1px solid #d8d8d8;
  background: #fff;
}

.select__list-item:hover {
  text-decoration: underline;
  cursor: pointer;
  background: #f9f9f9;
}

.select__list-item:first-child {
  border-radius: 2px 2px 0 0;
}

.select__list-item:last-child {
  border-bottom: none;
  border-radius: 0 0 2px 2px;
}

.select__input {
  display: none;
}
<div class="selects-box">
  <div class="select" data-select>
    <div class="select__selected-item" data-select-action data-select-open>
      <div class="select__selected-title" data-select-title>
        Choose item
      </div>
      <svg class="select__arrow" data-select-arrow width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 12L9 20L7 18L15 10" fill="#1E4DBA"/>
                    <path d="M17 12L15 14L7 6L9 4" fill="#1E4DBA"/>
                </svg>
    </div>
    <div class="select__list" data-select-list>
      <div class="select__list-item" data-select-action data-select-item>First item</div>
      <div class="select__list-item" data-select-action data-select-item>Second item</div>
      <div class="select__list-item" data-select-action data-select-item>Third item</div>
      <div class="select__list-item" data-select-action data-select-item>Fourth item</div>
      <div class="select__list-item" data-select-action data-select-item>Fifth item</div>
      <div class="select__list-item" data-select-action data-select-item>Sixth item</div>
      <div class="select__list-item" data-select-action data-select-item>Eight item</div>
      <div class="select__list-item" data-select-action data-select-item>Ninth item</div>
      <div class="select__list-item" data-select-action data-select-item>Tenth item</div>
    </div>
    <input class="select__input" type="text" data-select-input>
  </div>
</div>
<div class="selects-box">
  <div class="select" data-select>
    <div class="select__selected-item" data-select-action data-select-open>
      <div class="select__selected-title" data-select-title>
        Choose item
      </div>
      <svg class="select__arrow" data-select-arrow width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 12L9 20L7 18L15 10" fill="#1E4DBA"/>
                    <path d="M17 12L15 14L7 6L9 4" fill="#1E4DBA"/>
                </svg>
    </div>
    <div class="select__list" data-select-list>
      <div class="select__list-item" data-select-action data-select-item>First item</div>
      <div class="select__list-item" data-select-action data-select-item>Second item</div>
      <div class="select__list-item" data-select-action data-select-item>Third item</div>
      <div class="select__list-item" data-select-action data-select-item>Fourth item</div>
      <div class="select__list-item" data-select-action data-select-item>Fifth item</div>
      <div class="select__list-item" data-select-action data-select-item>Sixth item</div>
      <div class="select__list-item" data-select-action data-select-item>Eight item</div>
      <div class="select__list-item" data-select-action data-select-item>Ninth item</div>
      <div class="select__list-item" data-select-action data-select-item>Tenth item</div>
    </div>
    <input class="select__input" type="text" data-select-input>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.