从两个下拉列表中选择一百个项目

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

我不能用PHP做这件事，因为当页面被加载并运行PHP时，不知道选择什么类别。我在想，类别选择必须触发某些Ajax，这会导致所选类别的子类别选项下降，并将它们放入子类别中。有没有人有最好的办法做到这一点的任何想法？

来源

2016-02-22 Steve

_“我有十个类别和每个那些有十个小类，我需要让用户选择一个子类别，但我不希望把100只选择在一个单一的drop down。“_这是否在每个'select'元素中有10个'option'元素，而不是单个'select'元素中的100个'option'元素？ – guest271314

是的，每个选择元素有十个选项元素。 – Steve

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

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

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]" 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>

来源

2016-02-22 06:31:12 curtwphillips

从两个下拉列表中选择一百个项目

回答

相关问题