Jquery хороший плагин выбора не работает должным образом

Question

Я скачал jquery nice select и включил плагин в свой проект, и пути к файлам все правильные. У меня тоже уже есть jquery. У меня проблема с отображением моего выпадающего списка. Когда я использую этот код

<script>
  $(document).ready(function() {
    $('select').niceSelect();
  });
</script>

<select>
  <option>first</option>
  <option>second</option>
  <option>third</option>
</select>

, он отображает раскрывающийся список выбора на моей странице примерно так, до того, как элемент select даже нажимается

first
second
third

, поэтому вокруг него нет дополнительных стилей или функций, он просто отображает теги параметров.

Answer 1

В вашем коде нет ошибок. Также не достаточно ясно. Возьмите образец сотрудника.

Также обязательно включите его в начало библиотеки JavaScript и CSS.

$(document).ready(function() {
  $('select').niceSelect();
});

// CSS included from http://hernansartorio.com/jquery-nice-select
.container {
  margin-top: 48px;
}

.header {
  margin-bottom: 36px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://hernansartorio.com/jquery-nice-select/js/jquery.nice-select.min.js"></script>
<script src="https://hernansartorio.com/jquery-nice-select/js/fastclick.js"></script>
<link rel="stylesheet" type="text/css" href="https://hernansartorio.com/jquery-nice-select/css/style.css">
<div class="container">

  <div class="header">
    <h1>jQuery Nice Select</h1>
    <p>A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.</p>
    <a href="http://hernansartorio.com/jquery-nice-select/" class="button">See full documentation & download</a>
  </div>

  <h2>Defualt example</h2>

  <div class="box">
    <select>
      <option value="1">Some option</option>
      <option value="2">Another option</option>
      <option value="3">Potato</option>
    </select>
  </div>


  <h2>Display text</h2>
  <p>You can specify an alternate text for each option, which will be displayed on the dropdown when that option is selected.</p>

  <div class="box">
    <select>
      <option data-display="Select">Nothing</option>
      <option value="1">Some option</option>
      <option value="2">Another option</option>
      <option value="3">Potato</option>
    </select>
  </div>

  <h2>Custom classes</h2>

  <p>Every class you assign to a select element will be copied to the generated dropdown. That way you can customize different versions of it to your needs just by adding new CSS.</p>

  <div class="box">
    <label>Wide</label>
    <select class="wide">
      <option data-display="Select">Nothing</option>
      <option value="1">Some option</option>
      <option value="2">Another option</option>
      <option value="3">Potato</option>
    </select>
  </div>

  <div class="box">
    <label class="right">Right</label>
    <select class="right">
      <option data-display="Select">Nothing</option>
      <option value="1">Some option</option>
      <option value="2">Another option</option>
      <option value="3">Potato</option>
    </select>
  </div>

  <div class="box">
    <label>Small</label>
    <select class="small">
      <option data-display="Select">Nothing</option>
      <option value="1">Some option</option>
      <option value="2">Another option</option>
      <option value="3">Potato</option>
    </select>
  </div>


  <div class="footer">
    <p></p>
    <a href="http://hernansartorio.com/jquery-nice-select/" class="button">See full documentation & download</a>

    <div class="credit">
      Made by <a href="http://hernansartorio.com/">Hernán Sartorio</a>
    </div>
  </div>


</div>