選擇另一個選項后，將多個下拉（選擇）過濾器重置為“全部”（頂部選項）

Question

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

Answer 1

沒有您的標記，我無法真正獲得它，但是，由於看到您正在捕獲“ current_value”，為什么不將所有輸入都設置為“ All”，然后將原始輸入設置回去：

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

我確定可以將其修改為使用.not（） 。

Answer 2

如果通過寫

$（'＃dpmt_filter：input'）。change（function（）{

您想將更改偵聽器添加到#dpmt_filter select中，這是錯誤的。 你應該寫

$（'＃dpmt_filter'）。change（function（）{

因為“ #dpmt_filter：input”選擇任何輸入，文本區域，#dpmt_filter select中的select或button，所以我認為這不是您的情況。 因此， this更改監聽器不會引用您的#dpmt_filter選擇

順便說一句，您是否嘗試調試變更偵聽器？ 如果曾經調用過該監聽器，這將很奇怪，因為這意味着您已經在#dpmt_filter select內放入了一些輸入或按鈕或文本區域

Answer 3

jQuery沒有提供檢查我知道的“打開”選擇框的功能。

為了將所有選擇框設置為第一個，我要做的是：

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

我建議在此線程中更多地使用.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
});

我確信可以優化它來訪問所有綁定的元素，而不用再次搜索它們。

希望能幫助到你！