Блог

Мне нужно создать форму с 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"
      ]
    }
  }
}
  

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

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

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

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

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

Спасибо!

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

 $('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>');
   });
});  

Другой вариант, который вы могли бы использовать для замены источника данных для каждого поля, в зависимости от предыдущего выбора. Вот рабочий JS Fiddle, где параметры выпадающего списка определяются предыдущим выбором: https://jsfiddle.net/bsunderland/78hybL3v/3 /

Кроме того, вот некоторый пример кода для настройки параметров в select на основе предыдущего выбора поля, но с вызовом на стороне сервера:

 "postRender": function(control) {
            var parentType = control.childrenByPropertyId["Parent_LookupTypeCode"]; //Grab the Parent Lookup Type Object
            var parentCode = control.childrenByPropertyId["Parent_LookupCode"]; //Grab the Parent Lookup Object
            parentCode.subscribe(parentType, function(val) {//Subscribe parentCode to changes to parentType
                // alert(val);
                if(!val) {//val = value of parentType
                    val="Metrics"; //If missing, do nothing
                }
                else{
                    this.options.dataSource = "./ExtraStuff/Load_Lookups.php?q="   val; //Load values based on val of parentType
                }

                this.refresh(); //Refresh the form. This is needed. Without it, the updated options won't show
            });
        }