How to change placeholder of selectize.js dropdown

2020-07-07 11:27发布

站内问答 / JavaScript
1467 10 3

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 changed. There is no method to do this in documentation.

10条回答
爱情/是我丢掉的垃圾
2楼-- · 2020-07-07 11:35

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) 举报
We Are One
3楼-- · 2020-07-07 11:35

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) 举报
闹够了就滚
4楼-- · 2020-07-07 11:50

selectize.js will create an input below the select. This input will have the class .selectize-control.

You can replace the placeholder of this input field with jQuery.

You can do something like:

$(".selectize-control").attr('placeholder','Hello World!');

If you would like a working example, Ill need more information about your code.

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
5楼-- · 2020-07-07 11:51 
$('select#my-dropdown + .selectize-control').find('.selectize-control-input').prop({'placeholder': 'Placeholder Text'});
查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
6楼-- · 2020-07-07 11:53

You need two things:

  • add empty <option></option> as first option tag in the select.
  • add placeholder key to selectize call
查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
7楼-- · 2020-07-07 11:54

You can specify placeholder for select elements by adding an empty option element inside select tag. Here is an example:

<select name="color" required>
    <option value=""> Select a color </option>
    <option value="1"> Lavender </option>
    <option value="2"> Eggplant </option>
    <option value="3"> Cool grey </option>
    <option value="4"> Bitter lemon </option>
</select>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)