Как добавить всплывающую подсказку к отключенному элементу select с помощью jquery - PullRequest
Новая
       24

Как добавить всплывающую подсказку к отключенному элементу select с помощью jquery

0 голосов
/ 07 ноября 2018

У меня отключен элемент select, для которого я не могу просмотреть всплывающую подсказку. 

<div class="col-md-3">
        <select id="docpreset_colorformat" class="select2" name="docpreset_format_to" placeholder="Document format to"></select>
</div>

Jquery для отключения: 

$("#docpreset_colorformat").prop("disabled", true);

jquery для добавления всплывающей подсказки 

$("#docpreset_colorformat").prop('title', 'Disabled for selected doc type: ' + format_to);

Всплывающие подсказки работают для других элементов на странице, таких как тип ввода.

Не уверен, что мне здесь не хватает.

Буду признателен за любую помощь, например, ссылку на старый пост или подсказку.

1 Ответ

0 голосов
/ 07 ноября 2018

Я провел некоторое исследование, и плагин select2 не предлагает никакой опции (фактически) для отключения заголовка по умолчанию, который отображается для текущей выбранной опции. Так что это мой подход:

1) Отключить рендеринг заголовка с выбранным значением, используя следующий обходной путь: 

$('.select2-selection__rendered').removeAttr('title');

2) Добавьте элемент контейнера-обертки в элемент управления выборкой и настройте заголовок, который вы хотите отобразить в этой обертке. В примере, который я показываю, я использую элемент <spam> как обертку.

Проверьте следующий пример: первый элемент управления выбора реализовал обходной путь, описанный ранее, в то время как другой стандарт: 

$(document).ready(function()
{
    // Initialize select2 controls.

    $(".select2").select2();
    
    // Workaround for disable title rendering on the select2 plugin.

    $('.select2-selection__rendered').removeAttr('title');

    // Customize the "#sel1" control.

    $("#sel1").prop("disabled", true);
    $("#sel1").parent().prop("title", "Custom title for select control");
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-6">
    <spam>
    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </spam>
  </div>

  <div class="col-6">
    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
  
</div>
</div>
...