Can you use selected="selected" to auto select selectize.js on load?

Question

I'm working on a project where every select field is expected to use selectize.js. There can be any number of select fields on the page and I never know so it has to be abstract.

The init is very simple:

$('.selectize').selectize({
    create: true
});

You'd think the default selected value of any given select would be used when selectize inits...

<select class="selectize">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected="selected">Option 3</option>
</select>

But for some reason selectize only sets the first option as selected when init runs.

Am I missing something in the docs? Or does selectize really not use the selected attribute from html?

This also doesn't work when using <option value="3" selected>

To clarify, this is a data filtering utility where clicking directional filters, select boxes, etc are expected to reload the page while maintaining all selections. Thus, I have to rely on PHP GET params to set the selected items. That part is working as expected and I have verified that by disabling selectize.

EDIT as requested, this is all standard implementation. Selectize works fine, no console errors. It just inits with only the first value selected.

UPDATE

As answered below, you can use selected but for reasons unknown I can't in my setup. Must be a conflict somewhere. Anyhow, if anyone else has this issue, this is how I resolved mine. On my init, I loop through each select that has a matching get param and set it by comparing against the get value. The sample is here, which is not complete code but enough to get someone running...

var ss = $('#some-select').selectize();
var selectize = ss[0].selectize;
selectize.setValue(selectize.search(get_value).items[0].id);

Please edit your question and clarify: How and when are you executing that script? Is the DOM loaded when you do this? How have you included all the necessary libraries and plug-ins? It seems to work, if I copy-paste the HTML into the Selectize demo page and run the jQuery code in the console. — Sebastian Simon
@Xufox - jquery document.ready. all is included as expected and selectize works fine in all other respects. It just doesn't utilize my selected values — Kai Qing
Doesn't answer the question of whether or not setting the selected attribute should work or not, but you can pass an array of items that you want selected by default as one of your init parameters to skin this cat another way - see items under general settings on this page of the docs. — benvc

benvc benvc · Accepted Answer · 2018-09-13T13:44:43

Yes, you can use selected with selectize for your default option. Must be a conflict with some other code not included in your question because it looks like selectize handles the selected attribute as you would expect. See working snippet below.

$('.selectize').selectize({
  create: true
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Selectize</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
</head>

<body>

  <select class="selectize">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
  </select>
  
  <select class="selectize">
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>

</body>

</html>

Can you use selected="selected" to auto select selectize.js on load?

1 Answers