jQueryで、セレクトボックスのselectedIndexを変更しても表示が変わらない

前提・実現したいこと

Cakephpを使用して作成したシステムの中で、検索条件を指定して一覧表示する、という画面があります。
ここに条件クリアボタンがあるのですが、一度検索して結果一覧を表示させた後にクリアボタンをクリックしても
セレクトボックスのみ初期化されません。

色々と試してみたのですが、これ以上の対処方法がわからず、困っています。
どなたかお知恵を貸していただけないでしょうか。よろしくお願いいたします。

発生している問題・エラーメッセージ

** ▼期待している挙動▼ **

クリアボタンをクリックすると、全てのセレクトボックスのindexが0になる
テキストボックスの値は全て空になる

** ▼実際の挙動（検索ボタンクリック前）▼ **

クリアボタンをクリックすると、全てのセレクトボックスのindexが0になる
テキストボックスの値は全て空になる

** ▼実際の挙動（検索ボタンクリック後）▼ **

クリアボタンをクリックしても、セレクトボックスの値が変わらない
テキストボックスの値は全て空になる
検索ボタンクリック後、セレクトボックスの値を変更してからクリアボタンをクリックすると
検索ボタンをクリックした直後の状態に戻る

該当のソースコード

Javascript
$('#name').val('');  // テキストボックス（ここはOK）
$('#is-sendin-only').removeAttr('checked').prop('checked', false).change();  // 　チェックボックス（ここも問題なし）

// ここからセレクトボックス
console.log($('[name=pref]').val());　　//　この時点では25
$('[name=pref]').prop("selectedIndex", 0);
console.log($('[name=pref]').val());  // ログで出てくるのは空欄

試したこと

・オブジェクト取得をID指定で実施

Javascript
// ここからセレクトボックス
console.log($('[name=pref]').val());　　//　この時点では25
$('#pref').prop("selectedIndex", 0);
//$('[name=pref]').prop("selectedIndex", 0);
console.log($('[name=pref]').val());  // ログで出てくるのは空欄

・値の指定方法を変更

Javascript
// ここからセレクトボックス
console.log($('[name=pref]').val());　　//　この時点では25
$('#pref').val('');
//$('[name=pref]').prop("selectedIndex", 0);
console.log($('[name=pref]').val());  // ログで出てくるのは空欄

Javascript
// ここからセレクトボックス
console.log($('[name=pref]').val());　　//　この時点では25
$('#pref').val(null);
//$('[name=pref]').prop("selectedIndex", 0);
console.log($('[name=pref]').val());  // ログで出てくるのは空欄