单击 jQuery 中的任何其他选择框时重置选择框

Question

我阅读了一些主题，它们显示这两个代码可以重置选择框。

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

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

或者

$(this).val("");

但是当单击任何其他选择框时，我无法将选择框 (fiddle) 重置为“选择”。该代码使选择框通过data-file 加载内容并使用value 重定向到其他页面。由于我将在一个页面上有超过 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;
}

});

Answer 1

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

JSFIDDLE