Select2 JavaScript не меняется выбрать по умолчанию

Im пытается реализовать Select2 JavaScript на my Asp.net веб-сайт, но независимо от того, что я пытаюсь, он не кажется реализующим и просто показывает элемент управления select, как это обычно делается. Я пытался изменить мои скрипты и глядя на примеры на веб-сайте select2, но не могу, кажется, получить его.

Его, вероятно, что-то незначительное im отсутствует im угадать, ниже мой код:

@model AssignerWebTool.Models.CreateUserModel
@{
ViewBag.Title = "Create User";
}
<head>
<title></title>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function () {
$("help").select2();
});
</script>

<select id="help" class="help">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>
</body>

1 ответ

  1. Ваш селектор jQuery ошибается! helpВ вашем DOM нет такого элемента. Есть элемент с Id help. Таким образом, вы можете использовать селектор Id (используя #)

    Попробовать это

    $(document).ready(function () {
       $("#help").select2();
    });
    

    Также необходимо убедиться, что вы загружаете скрипты в правильном порядке. Ваш макет будет иметь определенный scriptsраздел, и вы должны вызывать скрипты уровня страницы только в том же scriptsразделе.

    Это должно сработать.

    <select id="help" class="help">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>
    
    @section scripts
    {
      <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
      <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
      <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
      $(function () {
    
         $("#help").select2();
    
       });   
    
    }