基于jQuery动态依赖下拉框，如何获取选中国家的名称？

嘿，我懂你的困扰——你能拿到选中国家的ID，但一直没法获取对应的名称，之前用attr("name")的思路其实走偏啦。

正确的实现方式：定位选中的<option>获取文本 #

要拿到选中项的名称，你需要定位到当前<select>里被选中的<option>元素，再提取它的文本内容。jQuery里有现成的简洁写法：

var country_name = $(this).find("option:selected").text();

结合你的代码修改示例 #

把这段代码加到你的#country的change事件里就行：

$(document).on('change', '#country', function(){
    var country_id = $(this).val();
    // 新增：获取选中国家的名称
    var country_name = $(this).find("option:selected").text();
    // 可以先打印测试效果
    console.log("选中的国家名称：" + country_name);
    
    if(country_id != '') {
        load_json_data('state', country_id);
    } else {
        $('#state').html('<option value="">Select state</option>');
        $('#city').html('<option value="">Select city</option>');
    }
});

为什么之前的方法无效？ #

你之前尝试的$(this).attr("name")，获取的是<select id="country" name="country">这个标签本身的name属性值（也就是字符串"country"），根本不是选中选项的文本内容，所以自然得不到想要的国家名称。

另外还有一种等效写法，效果完全一致：

var country_name = $(this).children("option:selected").text();

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