Выбор одной из ста статей с двумя выпадающими списками

У меня есть десять категорий, и каждая из них имеет десять подкатегорий. Мне нужно, чтобы пользователь выбирал подкатегорию, но я не хочу ставить 100 опций в одной папке. Моя мысль заключалась в том, чтобы понизить категорию с помощью десяти категорий, а также подкатегорию. В зависимости от того, какая категория выбрана из первого раскрывающегося списка, выпадающая подкатегория заполняется десятью подкатегориями для этой категории. Таким образом, пользователь может выбрать одну из ста подкатегорий с двумя выборами.Выбор одной из ста статей с двумя выпадающими списками

Я не могу сделать это с PHP, так как при загрузке страницы и запуске PHP не известно, какая категория будет выбрана. Я думаю, что выбор категории должен вызвать некоторый Ajax, который выводит параметры подкатегории для выбранной категории и помещает их в подкатегорию. Есть ли у кого-нибудь идеи по наилучшему способу сделать это?

источник

2016-02-22 Steve

_ "У меня есть десять категорий, и каждый из них имеет десять подкатегорий мне нужно, чтобы позволить пользователю выбрать подкатегорию, но я не хочу, чтобы положить 100 вариантов в одном drop ". _ Будет ли это десять элементов' option' в каждом элементе 'select', а не 100 элементов' option' в одном элементе 'select'? – 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

Выбор одной из ста статей с двумя выпадающими списками

ответ

Смежные вопросы