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

Question

我有两个下拉列表，城市和国家。城市下拉列表根据国家/地区下拉列表选择动态填充。因此，我正在尝试验证城市下拉列表，以确保选定的城市。

下面是appendCity函数，我用它将项目附加到City下拉列表。不幸的是它似乎没有用，所以有人可以检查一下并告诉我这里缺少什么吗？以及如何解决它？

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：

  <select id ="country" name="country" onchange="loadCities()">
    <option  value="0" selected="selected">--select--</option>
      <c:forEach var="countrylst" items="${countriesList}">
        <option  value="${countrylst.id}">${countrylst.countryName}</option>
      </c:forEach>
  </select>             

  <select id="city" name="city">
    <option  value="0" selected="selected">--select--</option>
  </select>     

Answer 1

变化

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

到

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

并将其从功能中取出

修改

在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 });
}