jQuery Ajax选择表单加载网址不起作用

Question

I am a designer who is trying to learn ajax/js through the development of my own site and having problems loading an external url through a form select function.

The problem. I have a set of icons on the left hand side which load url using ajax and pass the variable to a form select on the right hand side of the navigation. This works fine. The form select function does not load the url when a value is selected from the dropdown.

Link to test http://www.diztinct.co.uk/clients/Diztinct/home.html (functionality directly under the yellow banner)

Section of 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. I suspect I've missed/messed something in the filterSelect.change(function()?

//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!');
        }
    });
}

}

Any help/advice or links to tutorials for best practice is very much appreciated.

Answer 1

this inside the change() event handler will refer to your <select> rather than the selected option. Try using:

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'));