Почему я получаю Uncaught TypeError: У объекта #<HTMLSelectElement> нет метода 'find'?

Question

Почему я получаю:

Uncaught TypeError: У объекта # нет метода 'find' (анонимная функция):8080/twolittlesheep/js/sizeColorDependancy.js:16 c.event.handleajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:63 c.event.add.h.handle.oajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:56

когда я пытаюсь запустить простой скрипт jquery? Сценарий попадает в строку, где я использую метод find в следующем фрагменте кода jquery:

$(document).ready(function(){
  $("select#p_sizesId").change(function(){
   var $colorsSelect = $("select#p_colorsId")[0];
   $("select#p_colorsId")[0].find('option').remove().end().append('<option selected="selected" value="whatever">text</option>');
  });
});

В моей голове тег в HTML у меня есть:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<%-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> --%>
<script type="text/javascript" src="js/sizeColorDependancy.js"></script>

Я использую Google Chrome (вместе с инструментами разработчика).

Все, что я нашел в качестве объяснения в другой ветке, заключалось в том, что при использовании инструментов разработчика Chrome возникает проблема. Но я выполнял код без использования Инструментов разработчика, и произошло то же самое (скрипт ничего не сделал => произошла ошибка).

С уважением,
деспот

Answer 1

Когда вы делаете [0] вы получаете первый элемент, соответствующий селектору как элемент DOM, а не объект jQuery, который имеет .find() Просто удали это [0], как это:

$(document).ready(function(){
  $("#p_sizesId").change(function(){
   $("#p_colorsId").find('option').remove().end().append('<option selected="selected" value="whatever">text</option>');
  });
});

Несколько других заметок при использовании #id Селектор, не используйте префикс, если в этом нет крайней необходимости, он замедляет работу. Также, поскольку идентификаторы должны быть уникальными, не нужно получать первый элемент... селектор должен соответствовать только 1 или 0 элементам... если они не уникальны, не используйте идентификаторы... используйте классы.

Answer 2

Просто превратите его в объект jQuery, например так:

$($("select#p_colorsId")[0]).find('option')