Невозможно динамически добавлять опции в выборку из json - PullRequest
Новая
       15

Невозможно динамически добавлять опции в выборку из json

0 голосов
/ 30 апреля 2020

у меня есть select, с идентификатором category и product. Если выбрать один из вариантов в category, другой должен перечислить все продукты в этой категории. 

  var json = JSON.parse(xhr.responseText);
  console.log('value: '+e.value);
  for(var x in json) {
    console.log(x+' -> id: '+json[x]['id']);
    var all = document.getElementById(target).querySelector("#all");
    document.getElementById(target).innerHTML = '';
    document.getElementById(target).appendChild(all);

    var data = json[x];

    if(e.value == '*') {
      console.log('add ('+data['id']+', '+data['nome']+')');
      var child = document.createElement("option");
      child.setAttribute("value", data['id']);
      child.innerText = data['nome'];
      document.getElementById(target).appendChild(child);
    } else {
      if(data['categoria'].id == e.value) {
        console.log('add ('+data['id']+', '+data['nome']+')');
        var child = document.createElement("option");
        child.setAttribute("value", data['id']);
        child.innerText = data['nome'];
        document.getElementById(target).appendChild(child);
      }
    }
  }
  <div class="row">
          <div class="col-sm">
            Category:
            <select class="form-control" id="category" data-target="product" th:attr="data-url=@{/produto/listBy.json}" onchange="fill_produtos(this);">
              <option value="*">All</option>
              <option th:each="option : ${categories}" th:value="${option.id}">
                <span th:each="t : ${option.nome}" th:if="${#strings.equals(#strings.substringBefore(t.idioma,','), #strings.replace(#locale,'_','-'))}" th:href="@{/categoria/__${t.conteudo}__}" th:text="${t.conteudo}"></span>
              </option>
            </select>
          </div>
          <div class="col-sm">
            Produto:
            <select class="form-control" id="product">
              <option id="all" value="*">All</option>
              <option th:each="option : ${produtos}" th:value="${option.id}" th:text="${option.nome}"></option>
            </select>
          </div>
          <div class="col-sm">
            Date Range: <input type="date" class="form-control"> a <input type="date" class="form-control">
          </div>
        </div>

Сейчас это не так, как ожидалось. У меня есть эти 3 категории (названные one, two и three), каждая с 1 продуктом (prod1, prod2 и prod3). Я выбираю категории one или two, ни один продукт не указан в другом списке; если я выбираю категорию three или all, в другом списке указывается только продукт three.

За исключением того, что код отладки (console.log), добавленный к функции, похоже, следует правильный путь при выборе каждой опции на category: если я нажимаю one, отображается только сообщение внутри if(data['categoria'].id == e.value); то же самое для two и three. Если щелкнуть all, все сообщения будут отображаться, как и ожидалось, из-за инструкции, указывающей сделать это после if(e.value == '*').

Кто-нибудь может увидеть, что я здесь делаю неправильно? Я знаю, что что-то упустил, но не вижу, что это такое.

...