我正在尝试使用 grep 但无法使其正常工作

Question

当我手动更改“return obj.id === filterval;})[0];”中的“filterval”时到“2”，此代码工作正常。它不会使用我的变量。我试过用 var，没有，我试过把它移到对象函数中，没有任何作用。照原样，我得到“obj”未定义。但是，如果我更改为 2，它就可以工作。如果我将警报更改为“filterval”，它会提醒它，所以我知道它在那里。我做错了什么？

var categorytypearray = [{id:1, cat:3},{id:2, cat:4},]

$('#mainproduct').on('change', function() {
var filterval = $(this).val();

var obj = $.grep(categorytypearray, function(obj){
return obj.id === filterval;})[0];

alert(obj.cat);
// print

});

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

<select id="mainproduct" name="mainproduct">
<option value="0">Required</option>
<option value="1">Test Product 1</option>
<option value="2">Test Product 2</option>
</select>