必须在选择字段上单击两次以填充另一个选择字段

Question

我在使用下面的代码时，可以在选择相应的国家/地区时为州/地区填充另一个选择字段。但是，为了填充第二个选择字段，我必须单击第一个选择字段两次。

我知道这是一个简单解决方案的常见问题，但是许多解决方案无法解决我出错的地方。任何人都可以指出如何解决这个问题吗？

    $("#country").on('click',function() {
        var country = $('#country').val();
        var dataString = 'country='+ country;
        if(country){
            $.ajax({
                type: "POST",
                url: "query.php",
                data: dataString,
                cache: true,
                success: function(html){
                    $('#stateregion').html('<option value="">Loading...</option>');
                    $("#stateregion").removeAttr('disabled');
                    $('#stateregion').html(html);
                    $('#area').html('<option value="">-- Select State/Region First --</option>');
                }  
            });
        } else {
                    $('#stateregion').html('<option value="">-- Select Country First --</option>');
                    $("#stateregion").attr('disabled', 'disabled');
                    $('#area').html('<option value="">-- Select State/Region First --</option>');
                    $("#area").attr('disabled', 'disabled');
        }
    });

Answer 1

#country是select字段吗？如果是，请使用change事件代替click。