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

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。