jQuery ajax select form load url not working

Question

Я дизайнер, который пытается изучить ajax/js через разработку моего собственного сайта и проблемы с загрузкой внешнего URL через функцию выбора формы.

Проблема. У меня есть набор иконок с левой стороны, которые загружают URL-адрес с помощью 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'));