Как да промените контейнера на падащото меню selectize.js?

Искам да променя заместител на падащо меню, създадено от selectize.js, когато родителското падащо меню промени своя избор, за да зареди опциите на падащото меню, чийто заместител да бъде променен. Няма метод за това в документацията.


javascript dynamic jquery placeholder selectize.js
person freezer    schedule 02.10.2013    source източник
comment
Въпросът е неясен. какво си пробвал Някакви кодови фрагменти? Как се актуализират опциите?   -  person uKolka    schedule 09.10.2014

Отговори (9)


arrow_upward
9
arrow_downward

Не съм сигурен дали selectize продължава да променя кода си или всички останали в тази нишка просто са шушнали, но всички тези отговори изглеждат грешни поотделно, но ако някак комбинирате правилните части от всеки отговор, ще получите това, което работи за мен.

        var textHandler = function(name) {
        return function() {
            if(name == 'focus'){                    
                jQuery("select#myid + .selectize-control").find("input:text").prop({"placeholder": ""});
            }
        };
    };
    jQuery('#sf159_textsearchtextsearch').selectize({
        closeAfterSelect: true,
        hideSelected    : true,
        createOnBlur    : true,
        openOnFocus     : true,
        maxOptions      : 10,
        persist         : true,
        placeholder     : "Neighborhood, Street, School, Zip, MLS",
        plugins         : ['remove_button'],
        valueField      : 'id',
        labelField      : 'text',
        searchField     : 'value',
        options         : [],
        create          : false,
        render          : {
            option: function (item, escape) {
                //console.log(item);
                var address = '';
                var keyword = '';
                var tx = item.text.split(',');
                for (var i = 0, n = tx.length; i < n; i++) {                        
                    address += '<span class="span4">' + escape(tx[i]) + '</span>';                      
                }
                var template = '<div>' +
                        '<div class="row-fluid"> ' + address + ' </div>' +
                        '</div>';
                return template;
            }
        },
        load            : searchHandler,
        onKeydown       : keyHandler,
        onDelete        : deleteHandler,
        onFocus         : textHandler('focus'),
    });
person oasisfleeting    schedule 06.02.2016

arrow_upward
17
arrow_downward

Можете да посочите ключ placeholder като част от обекта с опции при инициализиране. Не можах да намеря опцията в документацията и я намерих само като ровех в кода.

//init selectize
$(function() {
  $('select').selectize({
    placeholder: 'Click here to select ...',
  });
});
person johnz0r    schedule 15.04.2015

arrow_upward
12
arrow_downward

Имате нужда от две неща:

  • добавете празен <option></option> като първи таг за опция в избраното.
  • добавете placeholder ключ към selectize повикване
person mikdiet    schedule 17.04.2015
comment
Изглежда, че празният ‹option›‹/option› е необходим. Благодаря, че го посочи. - person Liz; 21.03.2016

arrow_upward
2
arrow_downward

Можете да посочите контейнер за select елементи, като добавите празен option елемент вътре в маркера за избор. Ето един пример:

<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>
person Meti    schedule 11.11.2013

arrow_upward
2
arrow_downward

Уверете се, че използвате select таг за selectize.
Имах същия проблем, причинен от използването на вход вместо това. selectize също работи, но атрибутът placeholder не се показва. Когато смених на select, започна да работи

<select type="text" placeholder="Type words of the article..."></select>
person erandros    schedule 14.11.2014

arrow_upward
2
arrow_downward

Можете да актуализирате контейнера, като зададете selectize.settings.placeholder и след това извикате 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="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/bgstyle.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>

person JayChase    schedule 17.03.2017

arrow_upward
2
arrow_downward

Това е, което работи за мен (изберете версия "selectize": "^0.12.4" и използвайте само машинопис):

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

this.selectize.settings.placeholder = 'Another Placeholder';
this.selectize.updatePlaceholder();
person danielgehr    schedule 22.11.2018
comment
Това решение работи добре за мен. За тези, които се опитват да променят джаджа за избиране, която не са създали: s = $('select')[0].selectize; s.settings.placeholder = "new or revised placeholder"; s.updatePlaceholder(). - person user697473; 15.05.2020

arrow_upward
0
arrow_downward

selectize.js ще създаде input под select. Този input ще има клас .selectize-control.

Можете да замените placeholder на това поле input с jQuery.

Можете да направите нещо като:

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

Ако искате работещ пример, имам нужда от повече информация за вашия код.

person Cas Bloem    schedule 02.09.2014

arrow_upward
0
arrow_downward

Имах подобен проблем - това, което беше разочароващо е, че бих направил нещо подобно:

$("selectize-input input[placeholder]").attr('placeholder','Hello World!');

След това само след промяна на фокуса ще изобрази новия ми текст на контейнера. Оказва се, че по някаква причина (вероятно добра) selectize прилага ширина към този вход.

Окончателно решение:

$(".selectize-input input[placeholder]").attr('placeholder','Hello World!');
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");
person Nathan Bertram    schedule 27.04.2016