Question

我必须使用许多具有相同选项的select元素。我必须添加一个on chage事件监听器，它将监听这些类似选择中的任何更改。但我想仅仅更新标签，即实际的兄弟select实际上是使用类选择器更改了它的选项而不是id.Somehow，我找出了实际更改了它的选项的select的id。但是，在更改事件时更新了两个标签。它对我来说太棘手了。记得我是将使用相同的事件listen.so我不能使用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

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

$('.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>

Answer 2

检查以下解决方案：

＆＃13;

$('.p-select').on('change', function() {
   var that = $(this);
   var newLabel = that.find('option:selected').text();
   that.closest('div').children('label').html(newLabel);
});

＆＃13;

<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>

＆＃13;

Answer 3

您也可以使用.closest()

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

如何使用类选择器

3 个答案: