javascript - 如何使用类选择器根据其同级选择的更改事件更新标签

Question

我必须使用许多具有相同选项的选择元素。我必须添加一个 on chage 事件监听器，它将监听这些类似选择中的任何更改。但我只想更新作为实际同级的标签select 实际上使用类选择器而不是 id 更改了其选项。不知何故，我找出了实际更改其选项的 select 的 id。但是，更改事件正在更新两个标签。这对我来说太棘手了。记住我是将使用太多的选择来监听相同的事件。所以我无法使用 id 选择器。请帮忙。

$('.p-select').on('change', function() {
   //alert(this.id);
  var eid = "#"+this.id+"";
  alert('eid: '+eid);  
  $(eid).siblings(".p-label").html($(".p-select option:selected").text());
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label class="p-label"></label>
<select class='p-select' id="s1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 
</div>

<div>
<label class="p-label"></label>  
<select class='p-select' id="s2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 
</div>  
  

Answer 1

在获取selected选项的文本以及选择.sibling()元素时，使用当前元素上下文，即this。

$('.p-select').on('change', function () {
    $(this).siblings(".p-label").html($("option:selected", this).text());
    //$(this).prev(".p-label").html($("option:selected", this).text());    
    //$(this).closest('div').find(".p-label").html($("option:selected", this).text()); 
});

$('.p-select').on('change', function() {
  $(this).siblings(".p-label").html($("option:selected", this).text());  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label class="p-label"></label>
<select class='p-select' id="s1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 
</div>

<div>
<label class="p-label"></label>  
<select class='p-select' id="s2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 
</div>