How to change placeholder of selectize.js dropdown?

后端 未结 10 1387
盖世英雄少女心
盖世英雄少女心 2021-02-14 12:30

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)
  • 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)
提交回复
热议问题