如何通过jQuery分别获取下拉选框选中项的国家名称与ISO编码

直接可用的基础方案 #

你当前生成<option>的逻辑是把ISO编码存在value属性，国家名称作为选项文本，直接用jQuery内置方法就能拿到对应值：

获取ISO编码 #

下拉框的val()方法会直接返回选中项的value值，也就是你需要的ISO编码：

const countryCode = $('#innerSelect').val();

获取国家名称 #

选中的<option>元素的text()方法可以提取显示的国家名称：

const countryName = $('#innerSelect option:selected').text();

语义化的自定义数据属性方案（可选优化） #

如果想要更清晰的取值方式，或者后续需要扩展存储更多国家相关字段，可以在生成<option>时添加自定义data-*属性，把国家名称存入data-name：

修改选项生成代码 #

用ES6模板字符串替代字符串拼接，可读性更强：

$('#innerSelect').append(`<option value="${country['data'][i]['code']}" data-name="${country['data'][i]['name']}">${country['data'][i]['name']}</option>`);

按需取值 #

• 获取ISO编码：

const countryCode = $('#innerSelect').val();
// 也可通过data属性获取（和value值一致，按需选择）
const countryCode = $('#innerSelect option:selected').data('code');

• 获取国家名称：

const countryName = $('#innerSelect option:selected').data('name');
// 依然可以用text()方法获取
const countryName = $('#innerSelect option:selected').text();

两种方案都能满足你不同API请求的参数需求，根据自己的代码习惯选择即可。

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