Reset Select box when clicking on any other select boxes in jQuery

Question

I read a few threads and they show these two codes can reset a select box.

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

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

Or

$(this).val("");

But I can't get a select box (fiddle) to reset to "Select" when clicking on any of the other select boxes. The code have the select boxes load content via data-file and redirect to other pages using value. Since I'm going to have more than 10 select boxes on a page, so perhaps using class would be better. I have tried the above methods but I either got error or the boxes always stay the "Select" option. Can anyone suggest some solutions?

Code:

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;
}

});

Answer 1

$(".searchselectbox").not(this).prop('selectedIndex',0);
$('.select').text('Select');

JSFIDDLE