Javascript：从列表中获取选定的选项并将其粘贴到标签标记上

Question

我有一个国家/地区列表，html，它们有数字 ID 和国家/地区名称：

例如：

<select name="userDto.nationality" id="userDto.nationality">
            <option value="">Seleccione</option>
                <option value="1">Alemania</option>
                <option selected="selected" value="2">Argentina</option>
                <option value="8">Australia</option>
                <option value="9">Austria</option>
                <option value="10">Bélgica</option>
                <option value="11">Bolivia</option>
</select>

我尝试使用 jquery 脚本获取列表的国家/地区，而不是值、名称并将其粘贴到标签内。

$(document).ready(function() {      
    $("#userDto\\.nationality option:selected").click(function() { $("#nationalityLabel").html(this.value); });

});

应该获取国家/地区名称的 HTML 是：

<div name="userLabelDiv" id="nationalityUserLabelDiv">
    <label class="required">Nacionalidad :</label>
    <label id="nationalityLabel"></label> 
</div>

有人可以指导我解决问题吗？我找不到JS代码中的错误在哪里。 谢谢

Answer 1

两件小事：

• 从 $("#userDto\\.nationality option:selected") 更改选择器
  到 $("#userDto\\.nationality")

• 将事件处理程序从 click 更改为 change

完成。

$(document).ready(function() {      
   $("#userDto\\.nationality").change(function() { 
      $("#nationalityLabel").html(this.value);
   });
});

原因：

您当前的代码可以工作，但仅适用于“阿根廷”，因为默认情况下它是选择的。使用选择器 option:selected，您将事件处理程序仅绑定到选定的选项元素，即 Argentinia。

因此，您需要向 select 元素 本身添加一个事件处理程序。每当您更改选择时，更改处理程序就会触发。我想这就是你想要的结果。