How to Auto Select Ajax Dropdown in Javacsript based on a value

Question

How can we auto select ajax dropdown that is fetched using ajax from database table and populated in select box.

here is my code and it not seems to be working.

<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>

this is my select box

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

Note : i have passed php variable in "var countryfrom" and checked with single options but none of them worked, the issue is its not populating the dropdown.

Possible duplicate of [How do I programmatically set the value of a select box element using JavaScript?](https://stackoverflow.com/questions/78932/how-do-i-programmatically-set-the-value-of-a-select-box-element-using-javascript) — Anurag Srivastava, Mar 17 '19 at 09:22
@AnuragSrivastava : I can't find anything related to it Mate, I have checked Multiple Sources but i failed to solve this — imgrv, Mar 17 '19 at 09:23
You are setting a `selected` value for an option in the loop. You need to set an option as the value for select like shown in the answer. — Anurag Srivastava, Mar 17 '19 at 09:26
@AnuragSrivastava : I will be thankful to you, if you can write me a code little bit here, i am stucked almost. i am not able to understand it. — imgrv, Mar 17 '19 at 09:27

score 1 · Accepted Answer · answered Mar 17 '19 at 09:32

You can do this in your success function:

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

How to Auto Select Ajax Dropdown in Javacsript based on a value

1 Answers1