有一个#filterdiv,它包含3个选择:#dpmt_filter、#area_filter和#moi_filter。我无法将其他2个选择框(忽略当前选择框)"重置"为"全部"选项(这是顶部选项)。我以为会是这样的:
$('#filters :input').not($(this)).val('all');
但它没有起作用。知道我如何到达其他选择框并忽略当前框吗?
jQuery(document).ready(function($){
$('#courses_listing div.accordion').addClass('active');
$('#filter :input').change(function(){
var current_value = $(this).val();
//$('#filters :input').not(current_value).val('all');
if(current_value=="all")
{
$('#courses_listing p').remove('.no-courses');
$('#courses_listing div.accordion').removeClass('hidden').addClass('active');
$('#filters :input').val('all');
}
else
{
if ($('#courses_listing').find('.accordion').hasClass('hidden')){
$('#courses_listing').find('.accordion').not('.' + $(this).val()).removeClass('active').addClass('hidden'); // changes other values from active to hidden.
$('#courses_listing').find('.accordion' + '.' + current_value).removeClass('hidden').addClass('active'); // changes selected value from hidden to active.
} else if ($('#courses_listing').find('.accordion').hasClass('active')){
$('#courses_listing').find('.accordion').not('.' + $(this).val()).removeClass('active').addClass('hidden'); // changes selected value from active to hidden.
}
if (!$('#courses_listing div.accordion').hasClass('active')) {$('#courses_listing div#filters').after('<p class="no-courses">There are no courses with the current filter.</p>');}
else{$('#courses_listing p').remove('.no-courses');}
}});
});
这里只是添加一个例子,在#filtersdiv:中有一个选择框
<div id="filters">
<div id="dpmt_filter">
<p>Select box 1</p>
<form action="<?php bloginfo('url'); echo $_SERVER["REQUEST_URI"]; ?>" method="get">
<?php // Grabs Department terms and displays them
$dpmts = get_terms('departments', array(
'orderby' => 'name',
'hide_empty' => 0
) );
?>
<select id="departments">
<option value="all">All</option>
<?php foreach ($dpmts as $dpmt) : ?>
<option value="<?php echo $dpmt->slug; ?>"><?php echo $dpmt->name; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
</div>
如果没有您的标记,我真的无法获得它,但是,既然我看到您正在捕获"current_value",为什么不将所有输入设置为"all",然后将原始值设置回:
$('#filters :input').each(function(e) {
$(this).val('all');
});
$(this).val(current_value);
我相信这可以修改为使用.not().
如果通过写入
$('#dpmt_filter:input').change(function(){
您想要将changelistener添加到#dpmtfilter-select中,这是错误的。你应该写
$('#dpmt_filter').change(function(){
因为"#dpmt_filter:input"选择#dpmt_filter选择中的任何输入、文本区域、选择或按钮,我认为情况并非如此。因此,change监听器中的this
不会引用您的#dpmt_filter select
顺便问一下,你试过调试你的变更监听器吗?如果这个监听器被调用,那将是很奇怪的,因为这意味着你已经在#dpmt_filter select 中放入了一些输入或按钮或文本区域
为了将所有选择框设置为第一个,我会这样做:
$('select').find('option:first').prop('selected', 'selected');
我建议使用.pr()代替.attr(),更多内容请参见本线程。确切地说,在这种情况下,Chrome会给你带来麻烦,你还没有在其他浏览器上测试过它。
我建议如下:
$('#filter select').on('change', function() { // when a new value is selected
$('#filter select') // get all the select boxes
.not(this) // except the one clicked
.find('option:first') // get it's first option
.prop('selected', 'selected'); // mark it as selected
});
我相信有可能优化它访问所有绑定的元素,而不是再次搜索它们。
希望它能有所帮助!