jQuery ajax選擇表單加載網址不起作用

Question

我是一名設計師，他試圖通過我自己的網站開發來學習ajax/js，並且無法通過表單選擇功能加載外部網址。

問題所在。 我有一套左側的圖標，使用ajax加載網址，並將變量傳遞給導航右側的表單選擇。這工作正常。當從下拉列表中選擇一個值時，表單選擇功能不會加載url。

鏈接（直接黃色旗幟下的功能）測試http://www.diztinct.co.uk/clients/Diztinct/home.html

科HTML

 <div class="panel-holder"> 
       <ul id="quick-filter" class="rubrics"> 
        <li><a data-filter="web-design" data-filter-url="inc/web-design.html" href="#"><span>Web Design</span></a></li> 
        <li><a data-filter="responsive-design" data-filter-url="inc/responsive-web-design.html" class="respsonive-design tooltip" href="#"><span>Respsonive</span></a></li> 
        <li><a data-filter="user-interface-design" data-filter-url="inc/user-interface-design.html" class="ui-design tooltip" href="#"><span>UI Design</span></a></li> 
        <li><a data-filter="brand-identity-design" data-filter-url="inc/brand-identity-design.html" class="brand tooltip" href="#"><span>Brand</span></a></li> 
        <li><a data-filter="creative-production" data-filter-url="inc/creative-production-design.html" class="creative tooltip" href="#"><span>Creative</span></a></li> 
       </ul> 
       <form id="filter-form" class="request-form" action"#"> 
        <fieldset> 
         <select id="filter-select" > 
          <option value="all" data-filter-url="inc/list.html" title="images/ico1.png">Recent Updates</option> 
          <option value="brand-identity-design" data-filter="brand-identity-design" data-filter-url="inc/brand-identity-design.html" title="images/ico2.png" href="#" >Brand Identity</option> 
          <option value="web-design" data-filter="web-design" data-filter-url="inc/web-design.html" title="images/ico3.png">Web Design</option> 
          <option value="responsive-design" data-filter="responsive-design" data-filter-url="inc/responsive-web-design.html" title="images/ico4.png" >Responsive Design</option> 
          <option value="user-interface-design" data-filter="user-interface-design" data-filter-url="inc/user-interface-design.html" title="images/ico5.png">User Interface Design</option> 
          <option value="creative-production" data-filter="creative-production" data-filter-url="inc/creative-production-design.html" title="images/ico6.png">Creative Production</option> 
         </select> 
        </fieldset> 
       </form> 
     </div> 

的JS。我懷疑我已經錯過了/搞砸在filterSelect.change）的東西（函數（？

//initFilter 
function initFilter() { 
var filterForm = jQuery('#filter-form'); 
var filterSelect = jQuery('#filter-select'); 
var filterIcons = jQuery('#quick-filter a'); 
var listItems = jQuery('#item-list'); 
var ajaxRequest; 

filterIcons.bind('click', function(e) { 
    e.preventDefault(); 
    var value = this.getAttribute('data-filter'); 
    filterBox(value, this.getAttribute('data-filter-url')); 
    filterSelect.val(value); 
    if (filterSelect.length && filterSelect[0].jcf) { 
     filterSelect[0].jcf.refreshState(); 
    } 
}); 

filterSelect.change(function() { 
    filterBox(this.value, this.getAttribute('data-filter-url')); 
}); 

function filterBox(value, url) { 
    if (ajaxRequest) { 
     ajaxRequest.abort(); 
    } 
    listItems.addClass('loading'); 
    ajaxRequest = jQuery.ajax({ 
     url: url, 
     data: 'ajax=true&' + 'filter=' + value, 
     dataType: 'text', 
     type: 'get', 
     success: function(data) { 
      var newContent = jQuery('<div>', { 
       html: data 
      }); 

      listItems.empty(); 
      listItems.removeClass('loading'); 
      listItems.append(newContent.children()); 
      listItems.sameHeight({ 
       elements: '>div', 
       skipClass: 'noheight', 
       multiLine: true, 
       flexible: true 
      }); 
     }, 
     error: function() { 
      alert('AJAX Error!'); 
     } 
    }); 
} 

}

任何幫助/諮詢或教程的鏈接最佳做法是非常讚賞。

Answer 1

this的change()事件處理中會參考你的<select>，而不是選擇的選項使用嘗試：。

var opt = $(this).children(':selected'); 

// The following two lines are for debugging only: 
alert(opt.val()); 
alert(opt.attr('data-filter-url')); 

filterBox(opt.val(), opt.attr('data-filter-url'));