Question

我有十个类别，每个类别都有十个子类别。我需要让用户选择一个子类别，但我不想在一个下拉菜单中放入100个选项。我的想法是让一个类别下降十个类别，还有一个子类别下拉。根据从第一个下拉列表中选择的类别，子类别下拉列表将填充该类别的十个子类别。因此，用户可以从两个选项中选择一个子类别中的一个。

我无法用PHP执行此操作，因为在加载页面并运行PHP时，不知道将选择哪个类别。我认为类别选择必须触发一些Ajax，它会降低所选类别的子类别选项，并将它们放在子类别下拉列表中。有没有人对最佳方法有任何想法？

Answer 1

您可以使用json_encode或ajax加载子类别，然后使用js删除并附加选择更改事件的选项。

实施例： https://plnkr.co/edit/LFB2cxFQaNByiE6MwS7B?p=preview

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <select id="selectCategory">
    <option value="1">first</option>
    <option value="2">second</option>
    <option value="3">third</option>
  </select>
  <select id="subCategories">
    <option value="1">1-1</option>
    <option value="2">1-2</option>
    <option value="3">1-3</option>
  </select>
  <script>
    // load subcategories with json_encode or ajax
    var subcategories = [{
      category: '1',
      val: 1,
      text: '1-1'
    }, {
      category: '1',
      val: 2,
      text: '1-2'
    }, {
      category: '1',
      val: 3,
      text: '1-3'
    }, {
      category: '2',
      val: 1,
      text: '2-1'
    }, {
      category: '2',
      val: 2,
      text: '2-2'
    }, {
      category: '2',
      val: 3,
      text: '2-3'
    }, {
      category: '3',
      val: 1,
      text: '3-1'
    }, ];


    $("#selectCategory")
      .change(function() {
        var category = this.value;

        $("#subCategories")
          .find('option')
          .remove();

        subcategories.forEach(function(s) {
          if (s.category === category) {
            $("#subCategories")
              .append('<option value="' + s.val + '">' + s.text + '</option>');
          }
        });
      });
  </script>
</body>

</html>

使用两个下拉列表选择一百个项目中的一个

1 个答案: