使用ajax填充下拉框--分组select

<div class="form-group">
<label class="control-label col-xs-12 col-sm-4 no-padding-right" for="countryId">国家</label>
<div class="col-xs-12 col-sm-4"><div class="clearfix"><select id="countryId" name="countryId" type="text"  class="form-control field"></select></div></div>
</div>

var callBackCountry ;
callBackCountry = function (data) {
var option, optionGroup, firstOption, select, countryArray;
select = document.querySelector("#countryId");
select.innerHTML = "";
firstOption = document.createElement("option");
firstOption.value = "";
firstOption.innerHTML = "-------请选择国家-------";
select.appendChild(firstOption);
for (var countryName in data) {
optionGroup = document.createElement("OptGroup");
optionGroup.label = countryName;
countryArray = data[countryName];
for (var i = 0; i < countryArray.length; i++) {
option = document.createElement("option");
option.value = countryArray[i].id;
option.innerText = countryArray[i].name;
optionGroup.appendChild(option);
}
select.appendChild(optionGroup);
}
};
$.get("YOUR-URL", new Params(), callBackCountry, "json");