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

Question

我知道如何在更改 select 下拉列表时获取 selected 选项标签的 "value"。但是如何将关联的 "text" 即内部 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 - 西班牙

Answer 1

要获取 select 字段的 selected 选项的 selected 文本，我将执行以下操作

$("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);
});

Answer 2

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

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

Answer 3

把这个加在你身上就可以了javascript

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

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

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

JS jQuery on change get innerHTML of select option tag

javascript

jquery

select

innerhtml

option