JS jQuery on change获取选择选项标签的innerHTML

Posted 2023-05-07

【中文标题】JS jQuery on change获取选择选项标签的innerHTML

【英文标题】：JS jQuery on change get innerHTML of select option tag

【发布时间】：2020-04-22 08:25:50

【问题描述】：

我知道如何在选择下拉列表更改时获取所选选项标签的“值”。但是如何将关联的“文本”（即内部 html）放入 JS 变量“country_name”？

<select name="country" class="country">
    <option value="please-select" disabled="disabled" selected="selected">select country</option>
    <option value="DE">Germany</option>
    <option value="ES">Spain</option>
    <option value="FR">France</option>
    <option value="IT">Italy</option>
</select>

<script src="js/jquery-3.4.1.min.js"></script>

<script>
$('select.country').on('change',function()
    var country_code = $(this).val();
    var country_name = 'Selected Country Name';
    alert(country_code+" - "+country_name);
);
</script>

例如第二个选项所需的警报输出：

ES - 西班牙

【参考方案1】：

您只需要构建一个相对于下拉列表的选择器，通过 jQuery 的 :selected 伪选择器进入其 option 子级并过滤到选定的子级：

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

【讨论】：

如果我添加它，它会给我输出：“ES - [object Object]”

抱歉，写的比较匆忙；见编辑 - 你需要 .text() 方法。

【参考方案2】：

要获取选择字段的选定选项的选定文本，我会执行以下操作

$("select.country").change(function()
    var selectedCountry = $(this).children("option:selected");
    var country_code = selectedCountry.val();
    var country_name = selectedCountry.text();
    alert(country_code+" - "+country_name);
);

【参考方案3】：

只需在你的javascript中添加这个

$('select.country').on('change',function()
var country_code = $(this).val();
var country_name = ( $(this).find(":selected").text() )

alert(country_code+" - "+country_name);
);