Dynami c выбор формы с помощью JavaScript - PullRequest
Новая
       8

Dynami c выбор формы с помощью JavaScript

0 голосов
/ 28 мая 2020

У меня две категории в таблице базы данных.

Женская мода и Мужская мода

В разделе «Мужская мода» у меня есть мужская обувь

В разделе «Женская мода» у меня есть женская сумка

Я хочу javascript Я буду использовать в HTML Форму выберите, чтобы при выборе женской моды он / она видел список предметов в разделе женская мода, например, женская сумка во второй форме или при выборе мужской моды он / она также увидит список предметов в разделе «Мужская мода, например, Мужская обувь», во второй форме.

образец 

<form class="form">
  <div class="form-group">
    <select id="box1" name="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <select id="box2" name="letters">
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  </div>
</form>

то у меня есть это 

$("#box1").on('change', function () {
  var value = $(this).val();

  if (value === "1" || value === "2") {
      $("#box2").show();
  } else {
      $("#box2").hide();
  }
});

, но я не знаю, как его реализовать, используя значение базы данных

Пожалуйста, помогите

1 Ответ

1 голос
/ 28 мая 2020

ПРИМЕНИТЬ DRY ФИЛОСОФИЯ ДЛЯ ДАННОГО КОДА

Это всего лишь тест, но именно такое поведение вы ищете?

HTML КОД 

    <form class="form">
  <div class="form-group">
    <select id="collections" name="collection">
      <option>Select a value</option>
      <option value="man">Man</option>
      <option value="woman">Woman</option>
    </select>

    <select id="box2" name="collections-items">
    </select>
  </div>
</form>

JS КОД 

let chooseCollections = document.querySelector('#collections')
let selectItems = document.querySelector('#box2')

let manCollection = {
  categories: ["Shoes", "Shirt"]
}

let womanCollection = {
  categories: ["Dress", "Shirt"]
}

chooseCollections.addEventListener('change', (e) => {
  selectItems.querySelectorAll('*').forEach(el => el.remove());
  selectItems.style.display = "none"

  if(e.target.value === "man") {
    selectItems.style.display = "block"
    for(let i = 0; i < manCollection.categories.length; i++) {
      var option = document.createElement('option')
      var value = manCollection.categories[i]
      option.value = value
      option.innerHTML = value
      selectItems.appendChild(option)
    }
  }

  if(e.target.value === "woman") {
    selectItems.style.display = "block"
    for(let i = 0; i < womanCollection.categories.length; i++) {
      var option = document.createElement('option')
      var value = womanCollection.categories[i]
      option.value = value
      option.innerHTML = value
      selectItems.appendChild(option)
    }
  }
})

CSS

#box2 {
  display: none;
}

Я представляю manCollection и womanCollection как данные, которые есть в вашей базе данных. Этот код не оптимизирован и может быть более эффективным, но вы можете начать с него.

https://jsfiddle.net/0aek49fr/1/

...