Selectize dropdown content not rendered on page load in DOM

Question

On page load when inspecting the elements in Selectized drop-down the the actual content is missing (inside .selectize-dropdown-content):

After the click it populates the content:


  
    a2
    A50

Is there a way to populate it on page load?

Because as seen from above I use custom data attributes with whom I filter the options based on previous Selectized drop-down selection.

Current problem is that when i make selection in first drop-down the filter is not working as it has nothing to filter, as content is not in DOM, just after i click once on second drop-down and content populates in DOM the filtering starts working after changes on first one.

I tried triggering/simulating the click event, its not working.

I have read API and usage documentation, if I missed answer, I didn't understand it (not a native english speaker)

$('select').selectize({

});

EDIT:

Is there a way to programmatically de-selectize the HTML select, so I can do filtering on HTML select itself, and then selectize it again?

Is there any way of doing filtering of one selectized drop-down based on another? Using data attribute or any other?

user_14475852 · Answer

You can use refreshOptions method to populate options on page load

Example 1

// initialize the Selectize control
var $select = $('select').selectize({});

// fetch the instance
var selectize = $select[0].selectize; // 0 for select index
selectize.refreshOptions(false); // populate option on load

Example 2

// initialize the Selectize control
var $select = $('select').selectize({
    render: {
        option: function(data, escape) {
            return "" + escape(data.text) + ""
        }
    }
});

// fetch the instance
let car_select = $select[0].selectize; // 0 index for car select
let model_select = $select[1].selectize; // 1 index for model select
model_select.refreshOptions(false); // populate model select options on page load
car_select.on('item_add', function(value, item) {
   let selector = model_select['$dropdown_content'].children();
   model_select.setValue('none');
   selector.hide();
   selector.each(function() {
       let tmp = $(this);
       if (tmp.data('id') == value) {
           tmp.show();
       }
    })
})

user_10606400 · Answer

This is alternative solution.

Whenever your selectize-input is clicked you can checked if the input where click event has taken place is related to which select depending on this perform tasks .If its for something(just for example) then you first need to hide all divs inside selectize-dropdown-content and then check if data-attribute matches with the value of cars select-box depending on this show that div else hide.Also, as divs are generated on click of input-box so you can make one option selected as default .

Demo Code :

$('select#cars').selectize();
$('select#something').selectize({
  render: {
    option: function(data, escape) {
      return "" + escape(data.text) + ""
    }
  }
});

$(".selectize-input").on('click', function() {
  var selector = $(this).closest(".outer").find(".selectize-dropdown-content div")
  //get value of other select
  var value = $("#cars").val()
  //check if id is something
  if ($(this).closest(".outer").find('select').attr('id') == "something") {
    selector.hide() //hide divs
    selector.each(function() {
      //see if data-marka match value
      if ($(this).data('marka') === value || $(this).data('value') == 'none') {
        $(this).show() //show that div
      }
    })
  } else {
    //if cars select box is change find next select-box input and change it to default
    $(this).closest(".outer").next().find(".selectize-control .item").attr('data-value', "none")
    $(this).closest(".outer").next().find(".selectize-control .item").text("--Select one --");
  }
});

Selectize dropdown content not rendered on page load in DOM

2 Answers