Как создать форму, в которой один выпадающий список определяет параметры другого - PullRequest
Новая
       21

Как создать форму, в которой один выпадающий список определяет параметры другого

0 голосов
/ 05 марта 2019

Мне нужно создать форму с 3 выпадающими полями, где каждый выпадающий список должен заполняться параметрами, основанными на выборе предыдущего.У меня есть все мои данные в объекте.

Например: 

{
  "campaign1": {
    "name": "Campaign 1",
    "projects": {
      "job A": [
        "proj 1"
      ],
      "job B": [
        "proj 2",
        "proj 3"
      ]
    }
  },
  "campaign2": {
    "name": "Campaign 2",
    "projects": {
      "job C": [
        "proj 4",
        "proj 5",
        "proj 6"
      ],
      "job D": [
        "proj 7",
        "proj 8",
        "proj 9"
      ]
    }
  }
}

Идея состоит в том, что сначала вы выбираете «Кампанию», а затем во втором раскрывающемся списке отображаются только «Задания» дляЭта кампания, затем третья показывает только «Проекты» для этой работы.

Я начал с https://github.com/json-editor/json-editor, но, похоже, он не в состоянии делать то, что мне нужно.Я также посмотрел на альпаку, но она устрашает.

Альпака имеет тип поля optiontree, но, похоже, это не то, что я хочу (в том смысле, что я не присваиваю 'атрибуты' значению '') хотя отрендеренная версия ведет себя так, как я хочу.

Я хотел бы использовать свой объект данных как есть, хотя я могу реструктурировать его при необходимости.

В основном я хочу что-то вроде выбора драйвера на nvidia ... https://www.nvidia.com/download/index.aspx Сначала выберите тип, затем серию, основанную на типе, и т.д ...

Спасибо!

1 Ответ

0 голосов
/ 05 марта 2019

Я просто изменил структуру объекта для моего удобства.Это делает реализацию проще.используйте значение индекса в качестве атрибута значения в теге параметра, который можно использовать при получении дочернего объекта для следующего фильтра.Я создал пример кода для второго фильтра на основе результатов фильтра кампании. 

$('select').on('change', function() {
   var selected_index = $(this).children("option:selected").val();
   var selected_val = $(this).children("option:selected").html();
   var obj = [{
     "Campaign 1": {
     "name": "Campaign 1",
        "jobs": [{
            "name" : "job A",
            "projects": [
               "proj 1"
             ]},{
            "name" : "job B",  
            "projects": [
                "proj 2",
                "proj 3"
             ]}
         ]}
       },{
     "Campaign 2": {
          "name": "Campaign 2",
          "jobs": [{
               "name" : "job C",
               "projects": [
                   "proj 4",
                   "proj 5",
                   "proj 6"
               ]},{
               "name" : "job D",
               "projects": [
                   "proj 7",
                   "proj 8",
                   "proj 9"
               ]}
           ]}
       }];
   jQuery('#select_2').html('');
   obj[selected_index[selected_val].jobs.forEach( function(data, index){
     jQuery('#select_2').append('<option value="index">data</option>');
   });
});
...