javascript - 如何根据值在 Javascript 中自动选择 Ajax 下拉列表

Question

我们如何自动选择使用 ajax 从数据库表中获取并填充到选择框中的 ajax 下拉列表。

这是我的代码，但似乎无法正常工作。

<script>
$(document).ready(function(){

    $("#visitcountry").change(function(){
        var countryfrom = "India";
        var department = $(this).val();
        var tablename = "country";
        var res = dbnm.concat(department);
        $('.overlay').show();
        $.ajax({
            url: '<?= base_url();?>index/countries',
            type: 'post',
            data: {dest:res},
            dataType: 'json',
            success:function(response){
                console.log(response);
                var len = response.length;

                $("#countryby").empty();
                for( var i = 0; i<len; i++){
                    var id = response[i]['id'];
                    var name = response[i]['cityname'];
                    $("#countryby").append("<option data-nation='"+name+"' value='"+name+"' "+ (countryfrom.trim() == name.trim()) ? 'selected' : '' +">"+name+"</option>");
                    //$("#countryby").append("<option data-nation='"+name+"' value='"+name+"'>"+name+"</option>"); -this option works and populate dropdown but i want auto selection based on countryfrom variable
                }
               $('.overlay').hide();            
            }
        });
    }).trigger('change');

});
</script> 

这是我的选择框

<select class="countryby" name="countryby" id="countryby">
  <option value="0">- Select -</option>
 </select>

注意:我已经在“var countryfrom”中传递了 php 变量并检查了单个选项，但没有一个有效，问题是它没有填充下拉列表。

Answer 1

您可以在 success 函数中执行此操作:

success:function(response){
    console.log(response);
    var len = response.length;

    $("#countryby").empty();
    for( var i = 0; i<len; i++){
        var id = response[i]['id'];
        var name = response[i]['cityname'];
        $("#countryby").append("<option data-nation='"+name+"' value='"+name.trim()+"'>"+name+"</option>");
    }
   $('.overlay').hide();    

   // Setting value for select
   $("#countryby").val(countryfrom.trim()).change()
}