How to change placeholder of selectize.js dropdown?

后端未结

关注

 10  1382

I want to change placeholder of a dropdown created by selectize.js when the parent dropdown changes its selection to load the options of the dropdown whose placeholder to be cha

相关标签:

10条回答

清歌不尽

2021-02-14 13:13
Make sure you use a select tag for selectize.
I was having the same problem, caused by using an input instead. selectize worked too, but the placeholder attribute wasn't being displayed. When I changed to a select it started working
```
<select type="text" placeholder="Type words of the article..."></select>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2021-02-14 13:16

$('select#my-dropdown + .selectize-control').find('.selectize-control-input').prop({'placeholder': 'Placeholder Text'});

0 讨论(0)

遥遥无期

2021-02-14 13:24
You can specify a placeholder key as part of the options object when initialising. I couldn't find the option in the documentation and only found it digging through the code.
```
//init selectize
$(function() {
  $('select').selectize({
    placeholder: 'Click here to select ...',
  });
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

离开以前

2021-02-14 13:24

You can update the placeholder by setting selectize.settings.placeholder and then calling selectize.updatePlaceholder().

$(document).ready(function() {
  var s = $('#input-tags').selectize({
    persist: false,
    createOnBlur: true,
    create: true,
    placeholder: 'start placeholder'
  })[0].selectize;

  $('#updatePlaceholder').click(function() {
    s.settings.placeholder = 'new placeholder';
    s.updatePlaceholder();
  });
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Selectize setting placeholder</h1>
    <input type="text" id="input-tags" value="">
    <button id="updatePlaceholder">change</button>
  </body>
</html>

0 讨论(0)

野趣味

2021-02-14 13:27
You need two things:
- add empty <option></option> as first option tag in the select.
- add placeholder key to selectize call
0 讨论(0)
发布评论:

提交评论
- 加载中...

滥情空心

2021-02-14 13:28

This is what worked for me (selectize version "selectize": "^0.12.4" and using typescript only):

this.selectize = $(this.select).selectize({
  options: this.options,
  placeholder: 'My Placeholder'
})[0].selectize;

this.selectize.settings.placeholder = 'Another Placeholder';
this.selectize.updatePlaceholder();

0 讨论(0)

1 2 下一页