javascript - 使用 jquery 将选择框值附加到多个框的 prev p 标记

Question

我有这样的代码，它将多次附加选择框。我必须将所选值附加到相应的 p class="managerName" 标记中。p &select 框的组合将根据用户输入多次。需要在jquery中实现。有什么解决办法？？面临的问题

<p class="managerName"><span class='iconManager'></span></p>
<select onchange="SalesManager(this)" class="SalesManager">
   <option value="map roles">Map Roles</option>
   <option value="National_Manager">National Manager</option>
   <option value="Regional_Manager">Regional Manager</option>
   <option value="Area_Manager">Area Manager</option>
   <option value="Divisional_Manager">Divisional Manager</option>
</select>

Answer 1

试试这个：

$('#SalesManager').on('change',function () {
    $('p span[class=iconManager]').text(this.value);
});

演示在这里

Answer 2

您可以通过对 html 进行细微更改来执行此类操作 - 因为即使在显示管理器值之后您也希望保留图标

<p class="managerName"><span class='iconManager'></span><span class='manager'></span>
</p>
<select class="SalesManager">
    <option value="map roles">Map Roles</option>
    <option value="National_Manager">National Manager</option>
    <option value="Regional_Manager">Regional Manager</option>
    <option value="Area_Manager">Area Manager</option>
    <option value="Divisional_Manager">Divisional Manager</option>
</select>

然后

jQuery(function () {
    $('.SalesManager').change(function () {
        $(this).prev('.managerName').find('span.manager').html(this.value)
    });
})

演示：小提琴