Скрипт jQuery работает на jsFiddle, но не локально

Я пытаюсь использовать найденный мной сценарий для создания зависимого раскрывающегося списка на моей веб-странице. К несчастью. Хотя код на jsFiddle работает правильно, с моей стороны он совсем не работает.

var $select1 = ('#select1'),
  $select2 = ('#select2'),
  $options = $select2.find('option');

$select1.on('change', function() {
  $select2.html($options.filter('[value = "' + this.value + '"]'));
}).trigger('change');

<!DOCTYPE HTML>
<html>

<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div class = "col-xs-6">
    <select class = "form-control" name = "select1" id = "select1">
      <option value = "1">Fruit</option>
      <option value = "2">Animal</option>
      <option value = "3">Bird</option>
      <option value = "4">Car</option>
    </select>
  </div>
  <div class = "col-xs-6">
    <select class = "form-control" name = "select2" id = "select2">
      <option value = "1">Banana</option>
      <option value = "1">Apple</option>
      <option value = "1">Orange</option>
      <option value = "2">Wolf</option>
      <option value = "2">Fox</option>
      <option value = "2">Bear</option>
      <option value = "3">Eagle</option>
      <option value = "3">Hawk</option>
      <option value = "4">BWM
        <option>
    </select>
  </div>
</body>

</html>

Я новичок в HTML и JS, поэтому, пожалуйста, простите меня, если я допустил супер очевидные ошибки!

Можете быть более конкретными? Что именно не работает? Какие ошибки вы видите?

— 05.10.2018 20:21

Итак, вы дали нам рабочий пример, но не дали нам ничего, что могло бы воспроизвести проблему со своей стороны. Как мы должны помочь?

— 05.10.2018 20:21

Почему вы дважды вызываете jQuery?

— 05.10.2018 20:21

@QuentinVeron также, 2 разных версии

— 05.10.2018 20:24

У вас есть две версии jQuery, удалите одну и используйте обработчик document.ready. Предлагаю ознакомиться с learn.jquery.com. Голосование за закрытие как опечатка.

— 05.10.2018 20:27

javascript jquery html

05.10.2018 20:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Я был здесь раньше.

Попробуйте обернуть свой код следующим:

$( document ).ready(function() {
    //  Your code here
});

CodePen делает это автоматически.

Ошибка здесь в том, что ваш JavaScript выполняется до загрузки HTML, поэтому ваши #select1 и #select2 на самом деле еще не существуют. Вы ищете что-то, что не загрузилось.

Обновлять

The comment section has made some good points, but my answer is still addressing the primary reason your code has not been working. Here is the full snippet which will run in your browser

<!DOCTYPE HTML>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>=
      <script>
         $(function() {
                    var $select1 = $( '#select1' ),
         $select2 = $( '#select2' ),
          $options = $select2.find( 'option' );

         $select1.on( 'change', function() {
         $select2.html( $options.filter( '[value = "' + this.value + '"]' ) );
         } ).trigger( 'change' );
         });


      </script>
   </head>
   <body>
      <select name = "select1" id = "select1">
         <option value = "1">Fruit</option>
         <option value = "2">Animal</option>
         <option value = "3">Bird</option>
         <option value = "4">Car</option>
      </select>
      <select name = "select2" id = "select2">
         <option value = "1">Banana</option>
         <option value = "1">Apple</option>
         <option value = "1">Orange</option>
         <option value = "2">Wolf</option>
         <option value = "2">Fox</option>
         <option value = "2">Bear</option>
         <option value = "3">Eagle</option>
         <option value = "3">Hawk</option>
         <option value = "4">BWM
         <option>
      </select>
   </body>
</html>

05.10.2018 20:24

Другие вопросы по теме

Удалить необязательный параметр из URL-адреса AJAX

Как вызывать функцию каждую секунду или когда элемент загружается, если он принимает (this) в качестве параметра?

Метод Javascript не является конструктором

JQuery .val, похоже, плохо определен в компиляторе закрытия

Как не ждать выполнения кода перед переходом к следующему элементу массива в цикле for

Изменение положения массива объектов с горизонтального на вертикальное

Javascript 'OnClick' и HTML <a href> не работают при совместном использовании

Имеет ли значение, использую ли я PHP или AJX для возврата отформатированного HTML, содержащего данные из моей базы данных?

Сохранение значений раскрывающегося списка в ASP.NET Core MVC

JQuery Validator: проверка формы, которая не прикреплена к DOM

Скрипт jQuery работает на jsFiddle, но не локально

Ответы 1

Другие вопросы по теме

Похожие вопросы