So I have this code.

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<select id="cboNameSuffix" class="cboNameSuffix" style="width: 200px;">
</select>

```

Which I populate like this

```
$.ajax({
    dataType: "json",
    url: "http://localhost:1818/api/?method=get_all_extensions",
    success: function (result) {

        var $select = $('#cboNameSuffix');
        $select.find('option').remove();
        $.each(result, function (key, value) {
            $select.append('<option value=none>None</option>');
            $.each(value, function (index2, sub_record) {
                $select.append('<option value=' + sub_record.ID + '>' + sub_record.Name + '</option>');
            });
        });
    }
});

```

My problem is that every time I try to select an `option`, I can't seem to make it work. 

I tried

`$('#cboNameSuffix').val(student.NameSuffix.ID);`
`$('#cboNameSuffix[value='+student.NameSuffix.ID+']').attr('selected', 'true');`
`$('#cboNameSuffix').val(student.NameSuffix.ID).change();`
`$("#cboNameSuffix select").val(student.NameSuffix.ID);`

and every way I found online. 

This is how my UI looks for add and edit.

[![enter image description here](https://i.stack.imgur.com/HSYy9.png)](https://i.stack.imgur.com/HSYy9.png)