введите описание изображения здесь Я пытаюсь сделать поле поиска select2 видимым, если значения в раскрывающемся списке HTML соответствуют значению. Ниже приведен мой фрагмент кода. Почему-то всегда отображается раскрывающийся список Select2. Любая помощь приветствуется ...

Я добавил CSS на основе предложения о репозитории select2 github https://github.com/select2/select2/issues/861

<html>
<style type="text/css">
.other {
    display: none !important;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

          <select class="one" name="one" id="one">
            <option value="1">1</option>
            <option value="2">3</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            
         </select>
         <br>
  
<br>


    <select class="other" name="other" multiple="multiple">
  <option value="AL">Sample1</option>
  <option value="WY">Sample2</option>
    </select>
<script>
   // In your Javascript (external .js resource or <script> tag)
  

  $("#one").change(function() {

  $('#value').change(function()
  {
    if($('#value').val() == '1')
    {
        $('.other').hide();
    } else 
    {
        $('.other').show();
    }
}
)});
  $(document).ready(function() {
      $(".other").select2({
          tags: true
      });
  });
  
    
    </script>
  </html>
3
Sid 16 Янв 2021 в 14:53

2 ответа

Лучший ответ

Вы можете сделать что-нибудь подобное? Не уверен в вашем варианте использования. Но я предлагаю уничтожить избранных, а затем спрятаться. А позже снова создайте экземпляр и покажите.

$("#one").change(function() {

    if($(this).val() == '3')
    {
        $('.other').select2('destroy');
      $('.other').hide();
    } else {
        $(".other").select2({
          tags: true
      });
        $('.other').show();
    }
});
  $(document).ready(function() {
      $(".other").select2({
          tags: true
      });
  });
  
<html>
<style type="text/css">
.other {
    display: none !important;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

          <select class="one" name="one" id="one">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            
         </select>
         <br>
  
<br>


    <select class="other" name="other" multiple="multiple" style="width: 100px;">
  <option value="AL">Sample1</option>
  <option value="WY">Sample2</option>
    </select>

  </html>
1
A Paul 17 Янв 2021 в 08:19
$("#one").change(function() {

    console.log('me called');

    if($('#one').val() == '1')
    {
        $('.select2').hide();
        console.log($('#other'))
        console.log('me called1');
    } else 
    {
        $('.select2').show();
        console.log('me called2');
    }
});

Это работает для вас? Когда вы выбираете 3, а затем выбираете 1, элемент select2 исчезает.

0
Harney 16 Янв 2021 в 13:31