JSFiddle - React, Tailwind, and code Playground
HTML
<select name="ddState" id="ddState">
<option value="">--Select--</option>
<option value="AB">Alberta</option><option value="BC">British Columbia</option><option value="MB">Manitoba</option><option value="NB">New Brunswick</option><option value="NL">Newfoundland</option><option value="NS">Nova Scotia</option><option value="NT">Northwest Territories</option><option value="NU">Nunavut</option><option value="ON">Ontario</option><option value="PE">Prince Edward Island</option><option value="QC">Quebec</option><option value="SK">Saskatchewan</option><option value="YT">Yukon</option></select>
JavaScript
var StateToSelect = "IL";
var mStateDDToUpdate = 'ddState';
var result = '[{"Key":"AK","Value":"Alaska "},{"Key":"AL","Value":"Alabama "},{"Key":"AR","Value":"Arkansas "},{"Key":"GA","Value":"Georgia "},{"Key":"HI","Value":"Hawaii "},{"Key":"IA","Value":"Iowa "},{"Key":"ID","Value":"Idaho "},{"Key":"IL","Value":"Illinois "},{"Key":"IN","Value":"Indiana "},{"Key":"KS","Value":"Kansas "},{"Key":"KY","Value":"Kentucky "},{"Key":"LA","Value":"Louisiana "},{"Key":"WY","Value":"Wyoming "}]';
// Remove all the options except --Select--
while($("#" + mStateDDToUpdate + " option").size() > 1) {
$("#" + mStateDDToUpdate + " option:eq(1)").remove();
}
try {
var options = JSON.parse(result);
for (var i = 0; i < options.length; i++) {
$("#" + mStateDDToUpdate).append("<option value='" + options[i].Key.trim() + "' >" + options[i].Value.trim() + "</option>");
}
// Pick the state (retrieved earlier) from the new list.
if (typeof StateToSelect != 'undefined' && StateToSelect != null) {
$("#" + mStateDDToUpdate).val(StateToSelect);
}
} catch (ex) {
alert("Error setting the state list.\r\n" + ex.message + "\r\n" + result);
}