如何使用jQuery为geodata.solutions下拉框的德国选项添加selected属性

方案1：直接使用组件原生预设功能（无需修改JS代码，推荐） #

该级联组件本身已经内置了预设选中国家的逻辑，只需修改国家下拉框的class属性即可：

• 组件会自动读取国家下拉框的class属性，识别presel-开头的类名，提取类名后缀的国家代码，匹配对应国家自动添加selected属性
• 德国对应的ISO国家代码为DE，直接修改国家下拉框的class为countries presel-DE即可，修改后的完整HTML代码如下：

<select name="country" class="countries presel-DE" id="countryId">
    <option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
    <option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
    <option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

组件加载完成后会自动选中德国选项，同时自动触发change事件加载德国对应的州、市列表，完全符合预期效果。

方案2：根据后端返回的国家名称匹配（适配你现有的$user['country']参数） #

如果你需要直接和后端返回的$user['country']变量（值为Germany）匹配，可以修改JS中渲染国家列表的逻辑：

1. 找到JS代码中getCountries方法里，无大洲分组的国家渲染逻辑段，添加匹配规则：

jQuery.each(data['result'], function(key, val) {
    var option = jQuery('<option />');
    option.attr('value', val).text(val);
    option.attr('countryid', key);
    // 新增：和后端输出的国家名称匹配
    if(val == '<?php echo $user["country"]; ?>') {
        option.attr('selected', 'selected');
    }
    if(presel)
    {
        if(presel.toUpperCase() ==  key)
        {
            option.attr('selected', 'selected');
        }
    }
    jQuery('.countries').append(option);
});

2. 如果你开启了大洲分组显示，同步修改optgroup渲染段的逻辑即可：

var coption = jQuery('<option />');
coption.attr('value', options.name).text(options.name);
coption.attr('countryid', options.id);
// 新增：和后端输出的国家名称匹配
if(options.name == '<?php echo $user["country"]; ?>') {
    coption.attr('selected', 'selected');
}
if(presel) {
    if (presel.toUpperCase() == options.id) {
        coption.attr('selected', 'selected');
    }
}
coption.appendTo($optgroup);

内容的提问来源于stack exchange，提问作者Boris