选择另一个选项后，将多个下拉（选择）过滤器重置为“全部”（顶部选项）答案

【问题标题】：Reset multiple dropdown (select) filters to "All" ( top option) after another option is selected选择另一个选项后，将多个下拉（选择）过滤器重置为“全部”（顶部选项）
【发布时间】：2013-07-26 00:23:30
【问题描述】：

#filter div 包含 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');}
  }});
});

只是补充一下，这是#filters div内的一个选择框的示例：

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

【问题讨论】：

标签： javascript jquery html wordpress forms

【解决方案1】：

没有你的标记，我真的无法得到它，但是既然我看到你正在捕获“current_value”，为什么不将所有输入设置为“全部”，然后将原始值设置回来：

$('#filters :input').each(function(e) {
    $(this).val('all');
});
$(this).val(current_value);

我确信这可以修改为使用 .not()。

【讨论】：

你现在能明白了吗？抱歉，我更新了代码以使其更有意义。

【解决方案2】：

如果通过写作

$('#dpmt_filter :input').change(function(){

您想将更改侦听器添加到#dpmt_filter select，这是错误的。你应该写

$('#dpmt_filter').change(function(){

因为“#dpmt_filter :input”在您的#dpmt_filter 选择中选择任何输入、文本区域、选择或按钮，我认为这不是您的情况。因此，更改侦听器中的this 不会引用您的#dpmt_filter 选择

顺便问一下，您是否尝试过调试您的更改监听器？如果该侦听器被调用会很奇怪，因为这意味着您在#dpmt_filter select 中放置了一些输入或按钮或文本区域

【讨论】：

【解决方案3】：

据我所知，jQuery 没有提供检查“打开”选择框的功能。

为了将所有选择框设置为第一个，我会这样做：

$('select').find('option:first').prop('selected', 'selected');

我建议在this thread 中使用.prop() 而不是.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
});

我确信可以优化它访问所有绑定的元素，而不是再次搜索它们。

希望对你有帮助！

【讨论】：