Question

大家早上好。

我知道之前可能会有人问过，但我发现很难找到一个特定于我情况的解决方案，所以我想我会在这里问。

我正在开设一个网站，其中有一个帐户部分供客户将宠物添加到他们的广告资源中。表格本身有一个“物种”下降，反过来触发“品种”下降的变化事件，以便用所选物种特有的品种填充它。

但是，如果用户在未选择品种的情况下提前提交表格，则会显示错误，但品种下降现在未填充，因为触发器是物种下降的变化。因此，为了解决这个问题，我在javascript中添加了一个子句，用于检测物种下拉是否具有加载值，从而触发填充品种框的功能。但是，当重新加载页面并且未填充该框时，我收到上述错误。

这是jQuery：

jQuery('#species').change(function () {
    var species_id = $(this).val();
    loadBreeds(species_id);
});

if (jQuery('#species').val() != "") {
    var species_id = $(this).val();
    loadBreeds(species_id);
}

function loadBreeds(species_id) {
    console.log('loadBreeds is running');
    jQuery.ajax({
        url: "http://dev.mediaorb.co.uk/hiltonherbs.com/index.php?route=account/breeds",
        type: "post",
        data: "species_id=" + species_id + "&action=populateBreeds",
        success: function (data) {
            console.log('\nSuccess.');
            jQuery('#breed option').remove();
            jQuery('#breed').append('<option value="">-- Please select --</option>');
            if (!data) {
                jQuery('#breed').append('<option value="" disabled="disabled">No breeds found for selected species.</option>');
            } else {
                jQuery('#breed').append(data);
            }
        }
    });
}

以下是HTML格式的一部分：

    <div class="form-group">
    <label for="species" class="required">Species</label>
    <select class="form-control" id="species" name="species">
        <option value="" selected="selected">-- Please select --</option>
        <option value="1">Dog</option>
        <option value="2" selected="selected">Cat</option>
        <option value="3">Bird</option>
        <option value="4">Horse</option>
    </select>
</div>
<div class="form-group">
    <label for="breed" class="required">Breed</label>
    <select name="breed" id="breed" class="form-control">
        <option selected="selected" value="">-- Please choose a species first --</option>
</div>

我在这里创建了一个jsfiddle来说明这个功能：http://jsfiddle.net/1961bgay/

理想情况下，您需要打开控制台（或Firefox上的firebug）以查看错误发生的时间。

我认为这可能与我复制jQuery选择器的事实有关，但这是检查和添加触发器所必需的...任何帮助表示感谢，谢谢！

迈克尔

Answer 1

您只有一个小的JS上下文/作用域错误：

更改第9行：

从这个： var species_id = $(this).val();

对此： var species_id = jQuery('#species').val()

这是你工作的jsFiddle：http://jsfiddle.net/xgkefvbq/

希望有所帮助！

尝试执行ajax调用时，TypeError：elem.nodeName未定义

1 个答案: