1

I'm using selectize in my metoer app in order to display a form. The form has about 4 dropdowns that are interdependent. Meaning, options in dropdown 2 depends on previously selected options in dropdown 1

The initial dropdown 1 loads fine when i use the options field and feed it JSON data such as:

[
      {label: "name 1", value: "name-1"},
      {label: "name 2", value: "name-2"}, 
]

Post selecting the first dropdown, the second dropdown is empty. This is ok, since it's not reactive and is initialized at the begining during template render.

In order to make dynamically add options, the documentation seems to suggest the use of load function, however, uses AJAX. I use mongo db and have my query results already. I don't know how to pass this JSON object to the dropdown.

I've tried :

option2helper: function() {

        return {
            load: finalResult
        }

    },

I've also tried addOption: finalResult instead of load:finalResult but to no use. The documentation suggests that the result set must be in an array format. I've tried passing both array as well as an array of objects. Arrays simply show me empry dropdowns while array of objects show the dropdown with [Object][object].

How exactly do I pass this json object to the dropdown?

The finalResult is of the form:

[
      {label: "another 1", value: "another-1"},
      {label: "another 2", value: "another-2"}, 
]

I don't have a problem mapping it to :

["another-name0","another-name1"]

References I've gone through:

Official Docs

Passing a external variable in JSON.parse function

Selectize.js manually add some items

Community
  • 1
  • 1
blueren
  • 2,730
  • 4
  • 30
  • 47

0 Answers0