エラー「Cannot read property 'indexOf' of null」について

Question

セレクトボックスで選択中の項目のvalueを取得し、特定の文字列（'kuro'）が含まれていた場合はその文字列を削除して、変数（animal）に格納するようにしています。

一応思ったような処理にはなっていて、その後の処理も問題なく動くのですが、
ページのロード時に表題のようにエラーが返されてしまいます。

「選んでください」のvalueに適当な値を入れてみた場合でもエラーは変わりませんでした。

.change()はセレクタボックスの中身が変更されたときに実行されるかと思うのですが、
ページがロードされたときにindexOfがnullだというエラーが返されるのはなぜでしょうか。

また、エラーが出ないようにするにはどのようにすればよいでしょうか。
お手数ですがご教示いただけますと幸いです。

<select id="hoge" class="parent">
    <option value="" selected="selected" disabled="">選んでください</option>
    <option value="inukuro">いぬ黒</option>
    <option value="inu">いぬ</option>
    <option value="neko">ねこ</option>
    <option value="tori">とり</option>
</select>

$('.parent').change(function() {
    var animal= $(this).val();
    if (animal.indexOf('kuro') != -1) {
        animal = animal.replace('kuro', '');
        console.log('kuroがあるよ');
    } else {
        console.log('kuroはないよ');
    }
// animalを使った処理
});

---

追記です

ちなみにifの部分がない状態ではエラーは出ません。

$('.parent').change(function() {
    var animal= $(this).val();

// animalを使った処理
});

Answer 1

選択されていない場合、.val() がundefinedを返すからでは。

【.val() | jQuery API Documentation】
https://api.jquery.com/val/

The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.

Comments

[ync_pp]

回答ありがとうございます！
「$('.parent').change(function() {～」の中に「.val()」がある場合で、セレクトボックスを変更していない状態でも「.val()」は実行されてしまうということでしょうか？
また、入れ違いで追記させていただいたのですが、'kuro'の有無を判定するif文がない場合にはエラーは出ません。他にヒントなどありましたら引き続きご教示いただけると幸いです。

[kei344]

普通は実行されません。提示外のコードに問題があるのだと思います。
（提示されたコードだけでは問題が再現しない）⇒ https://jsfiddle.net/2npLedbq/

回答したものは、そもそものコードを（たとえば）
if (animal && animal.indexOf('kuro') != -1)
にすればとりあえず回避できるという、エラーの原因についてのものです。
エラーは if の有無とは直接関係有りません。（animal の中身を確認しないまま処理していることがエラーにつながっている）

[ync_pp]

再現のご確認ありがとうございます。
scriptファイルにある処理を1つずつコメントアウトして確認してみたところ、パラメータのクエリを取得してセレクトボックスの初期値をセットする処理があるのですが、これが原因のようでした。
$function(){}ごとに各処理がくくられていても影響があるのですね（知識が乏しくすみません）

教えていただいた記述で、ひとまずエラーを回避できましたので、原因となっているコードを見直してみます。糸口を教えてくださりとても助かりました、ありがとうございます！

Answer 2

同じscriptファイルにあった、パラメータでセレクトボックスの初期値をセットする処理が影響していたため、パラメータがなかった場合には処理を行わないよう分岐することで解決できました。

ヒントを下さった回答者様ありがとうございました。