Javascript 为动态添加的选择选项添加JQuery规则

我有两个下拉列表，城市和国家。城市下拉列表根据国家/地区下拉列表选择动态填充。所以，我试图验证城市下拉列表，以确保选中的城市

下面是appendCity函数，我使用它将项目附加到城市下拉列表中。不幸的是，它似乎不起作用，所以请有人检查一下，告诉我我在这里遗漏了什么？如何修复它

function appendCity(id,cityName){
    $('#city').append("<option id='"+id+"'>" + cityName + "</option>");           
}

负责将数据添加到城市下拉列表的JS代码：

    function loadCities(citiesLst){
        clearCities();
        var arr=citiesLst.split(",");
        for(var i=0;i<arr.length;i++){
            var cityArr=arr[i].split("#");
            appendCity(cityArr[0],cityArr[1]);
        }

        $('#city').rules("add", { required:true, min:1 });
    }

    function clearCities(){
        $('#city').find('option').remove();
    }

    function appendCity(id,cityName){
        $('#city').append("<option id='"+id+"'>" + cityName + "</option>");
    }

HTML:

改变

到

把它从函数中去掉

编辑

在loadCities函数中的循环之后添加验证规则

function loadCities(citiesLst){
    clearCities();
    var arr=citiesLst.split(",");
    for(var i=0;i<arr.length;i++){
        var cityArr=arr[i].split("#");
        appendCity(cityArr[0],cityArr[1]);
    }
    // HERE
    $('#city').rules("add", { required:true, min:1 });
}

---

那我把它放在哪里呢？如果我把它放在document.ready下，它将不起作用，那么我还能把它放在哪里呢？是的，放在document.ready。。在您的代码中，似乎在DOM之前已经添加了城市。是否在循环中调用appendCity？文档准备就绪时，城市下拉列表未填充，取而代之的是，只有当访问者从同一个窗口的“国家”下拉列表中选择一个国家时，它才会被填写form@MChan-您知道只有那些已经添加的标记才会受到.rules的影响，因此您应该在附加所有选项后运行.rules

$('#city option[id='+id+']').rules("add", { required:true, min:1 });

$('#city').rules("add", { required:true, min:1 });

function loadCities(citiesLst){
    clearCities();
    var arr=citiesLst.split(",");
    for(var i=0;i<arr.length;i++){
        var cityArr=arr[i].split("#");
        appendCity(cityArr[0],cityArr[1]);
    }
    // HERE
    $('#city').rules("add", { required:true, min:1 });
}