Как использовать Javascript jquery в моем html файле?

Как применить выбранный jQuery на моей странице html?

У меня есть форма select, поэтому мне нужно использовать multiple select по выбору, чтобы он выглядел более удобным.

<select class="chosen" multiple="true" name="faculty">
        <option value="AC">A</option>
        <option value="AD">B</option>
        <option value="AM">C</option>
        <option value="AP">D</option>
</select>

Я загрузил файлы и скопировал их в папку моей веб-страницы.

Итак, я включил chosen.jquery.min.js в <head>:

<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>

И инструкция говорит, чтобы вызвать выбранный плагин: $(".chzn-select").chosen();

Я не знаю, где поставить этот оператор JavaScript, чтобы вызвать Chosen multiple select. Я думал, что это так же просто, как использовать Bootstrap, ха. Любая помощь?

Ответы

Ответ 1

Если вы следуете одной из структур разметки бутстрапов, вы заметите, что они вызывают все свои файлы JavaScript внизу (справа </body>).

Вы хотите сделать то же самое; что-то вроде:

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/script.js"></script>     <!-- Your custom JS -->

  </body>
</html>

Внутри этого файла script.js вам нужно добавить что-то вроде:

$(function(){
    $(".chzn-select").chosen();
});

Ответ 2

Ваш select должен иметь класс chzn-select, и обычно вы запускаете script после загрузки страницы, как показано ниже:

$(function() {
    $(".chzn-select").chosen();
});

Ниже приведен тестовый рабочий пример:

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>

<script type="text/javascript">
$(function() {
    $(".chzn-select").chosen();
});
</script>

<select class="chzn-select" multiple="true" name="faculty" style="width:200px;">
        <option value="AC">A</option>
        <option value="AD">B</option>
        <option value="AM">C</option>
        <option value="AP">D</option>
</select>


</body>
</html>

Ответ 3

<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".chzn-select").chosen();
});
</script>

<select class="chzn-select" multiple="true" name="faculty">
        <option value="AC">A</option>
        <option value="AD">B</option>
        <option value="AM">C</option>
        <option value="AP">D</option>
</select>