jQuery ajax选择表单加载url不工作

Question

我是一个设计师，他试图通过开发自己的站点来学习ajax/js，并且在通过表单选择函数加载外部url时遇到了问题。

问题。我在左边有一组图标，使用ajax加载url，并将变量传递给导航右侧的表单select。这个很好用。表单选择函数在从下拉列表中选择值时不会加载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'));