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()
}

如何基于值自动选择Javacsript中的Ajax下拉列表

1 个答案: