javascript - jQueryで他の選択ボックスをクリックすると、選択ボックスがリセットされます

Question

いくつかのスレッドを読んだところ、これら 2 つのコードで選択ボックスをリセットできることがわかりました。

$('#select2').change(function(){
    $('#select1').prop('selectedIndex',0);
});

$('#select1').change(function(){
    $('#select2').prop('selectedIndex',0);
});

または

$(this).val("");

しかし、他の選択ボックスをクリックしたときに、選択ボックス(フィドル)を「選択」にリセットすることはできません。このコードでは、選択ボックスが を介してコンテンツをロードしdata-file、 を使用して他のページにリダイレクトしますvalue。1 ページに 10 個以上の選択ボックスを配置するので、おそらくクラスを使用する方がよいでしょう。上記の方法を試しましたが、エラーが発生したか、ボックスが常に「選択」オプションのままです。誰かがいくつかの解決策を提案できますか?

コード：

var area = $(".selectboxarea");

$(".searchselectbox").on('change', function () {
    area.empty();
    var $this = $(this);
    var selected = $this.find('option:selected');
    var loadfile = selected.data('file');

if (loadfile) {    
    $this.next('.selectboxarea').html(loadfile);
    $this.find('.select').text('Hide');
    $this.find('.select').toggleClass('hide');

} else if (selected.hasClass('hide')) {
    selected.text('Select');
    selected.toggleClass('hide');

} else { 
    var url = $this.val();
    if (url != '') {
    window.location.href = url
}
    return false;
}

});