Как изменить выпадающий текст по умолчанию? - PullRequest
Новая
       22

Как изменить выпадающий текст по умолчанию?

0 голосов
/ 14 сентября 2018

Я пытаюсь изменить заголовок раскрывающегося списка.Я использую этот Multi-select плагин .

Но мне не удалось динамически изменить текст (заголовок выпадающего меню) из JavaScript. 

$('#pickere-buttonTitle').multiselect({
    buttonText: function(options, select) {
        return dist;
    }
});

Метод 2 

$('#pickere option:selected').value = state;

КОД HTML 

<div class="form-group">
                           <label>Select District:</label>
                           <select class="form-control" id="district-pickere">
                           </select>
                           </div>
                            <div class="form-group">
                           <label>Select Sub District:</label>
                           <select class="form-control" id="subdistrict-pickere">
                           </select>
                           </div>

КОД JS 

function editUser(id, name, mob, mail, addr, state, dist, subdist, type, role) {

    console.log("USER DATA > > " + name + " > > " + mob + " > > " + mail + " > > " + addr);

    console.log("USER LOC > > " + state + " > > " + dist + " > > " + subdist );

    document.getElementById("namee").value = name;
    document.getElementById("mobilee").value = mob;
    document.getElementById("emaile").value = mail;
    document.getElementById("addre").value = addr;

    $('#state-pickere option:selected').value = state;

    $('#district-pickere-buttonTitle').multiselect({
        buttonText: function(options, select) {
            return dist;
        }
    });

    $('#sub-district-pickere-buttonText').value = subdist;

}

ОБНОВЛЕНИЕ 

$('#district-pickere').multiselect({
        includeSelectAllOption: true,
        enableFiltering: false,
        maxHeight: 300,
        nonSelectedText: dist
    });

Приведенный выше код работает во время инициализации.Но как я могу изменить невыбранный тест из другой функции при нажатии кнопки?

1 Ответ

0 голосов
/ 14 сентября 2018

Если вам нужно программно выбрать опцию для плагина множественного выбора, вам нужно вызвать метод $('#district-pickere').multiselect('select',['myvalue']), где ваше значение должно быть передано в массиве

Обратите внимание, что мультиселект запомнит ранее выбранные параметры, поэтому полезно отменить выбор всех значений, вызвав

$('#district-pickere').multiselect('deselectAll',false);

, а затем в соответствии с документацией звоните $('#district-pickere').multiselect('updateButtonText')

Так что следуйте этому порядку

  1. $('#district-pickere').multiselect('deselectAll',false);

  2. $('#district-pickere').multiselect('select',['myvalue'])

  3. $('#district-pickere').multiselect('updateButtonText')

В случае, если ваш элемент управления множественным выбором не имеет значений, и вы хотите переопределить текст, который информирует пользователя о том, что ему нужно выбрать значение (или какие значения он выбрал), вы делаете это путем переопределения в конфигурации свойства buttonText 

$('#example-buttonText').multiselect({
      buttonText:function(options,select){
       if (options.length === 0) {
              return 'Please select something';
       }else if (options.length > 3) {
         return 'More than 3 options selected!';
       }else {
          var labels = [];
          options.each(function() {
          if ($(this).attr('label') !== undefined) {
             labels.push($(this).attr('label'));
           }else {
              labels.push($(this).html());
           }
         });
        return labels.join(', ') + '';
       }
      }
});

Если вам нужно изменить только текст без выбранных опций, вы можете сделать это с помощью init и установить свойство nonSelectedText 

$('#myselect').multiselect({
    nonSelectedText:'I have no selection'
 });

Если вам нужно сделать это программно с помощью нажатия кнопки (#changeTitle - это идентификатор кнопки), то вы можете вызвать setOptions с новой конфигурацией, а затем вызвать rebuild, чтобы мультиселект перестроился с новой подтверждение 

$('#changeTitle').click(function(){

  $('#myselect').multiselect('setOptions',{nonSelectedText:'I have no options to select'});
  $('#myselect').multiselect('rebuild');
 });
...