Question

我有一个label和一个select下拉列表：

<label for="serviceID[1]">Service</label>
<select name="serviceID[1]" id="serviceID[1]" class="jq__pickedNewService">
<option value="" selected="selected">No Service Selected</option>
<option value="004">Service 1</option>
<option value="001">Service 2</option>
<option value="005">Service 3</option>
<option value="002">Service 4</option>
</select>

我尝试过各种jquery代码来替换label标签内的HTML，但是我没有成功：

$('.jq__pickedNewService').change(function(){
  var i = 1; //for the sake of this example
  $('select.jq__pickedNewService[name="serviceID\\[' + i + '\\]"]').closest('label').html('Service Replaced'); // does not work
  $('#serviceID\\[' + i + '\\]').closest('label').html('Service Replaced'); // does not work
  $('#serviceID[1]').closest('label').html('Service Replaced'); // does not work
}); // end pickedNewService

Answer 1

.closest()搜索元素及其父元素。 <label>是<select>之前的兄弟姐妹，因此您可以改为使用.prev()：

Small example

$('[id="serviceID[1]"]').prev('label').html('Service Replaced');

另外值得一提的是，由于<select>在ID中有括号，您可以使用[id="serviceID[1]"]选择它，但不能选择#serviceID[1]。

change $('.jq__pickedNewService').on("change", function() { $(this).prev('label').html('Service Replaced'); });事件处理程序：

{{1}}

Answer 2

您需要使用.change()获取select的当前值，然后您可以查找所选option的文本（或者您可以使用$(this).val()找到该值$("select").change(function(){ var optionChosen = $(this).find("option:selected").text(); $("#label").html(optionChosen); });）：

{{1}}

FIDDLE

Answer 3

如果您需要根据选择的ID选择标签，您可以执行以下操作：

$('.jq__pickedNewService').change(function(){
     $('[for=' + $(this).attr('id').replace(']', '\\]').replace('[', '\\[') + ']').html('some value');
});

以下内容也应该有效：

$('.jq__pickedNewService').change(function(){
    $(this).siblings('label').html('some value');
});

Answer 4

我建议，避免依赖于指定或硬编码特定的<label>并避免依赖特定的HTML结构：

＆＃13;

// binding a change event-handler:
$('select').on('change', function() {
  // getting a list of the <label> elements associated with this
  // particular <select> element:
  var labels = this.labels,
    // getting the text of the selected option:
    opt = $(this).find('option:selected').text();

  // setting the text of all the associated <label> elements to the
  // text of the currently-selected <option>:
  $(labels).text(opt);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="serviceID[1]">Service</label>
<select name="serviceID[1]" id="serviceID[1]" class="jq__pickedNewService">
  <option value="" selected="selected">No Service Selected</option>
  <option value="004">Service 1</option>
  <option value="001">Service 2</option>
  <option value="005">Service 3</option>
  <option value="002">Service 4</option>
</select>

＆＃13;

参考文献：

JavaScript的：
- HTMLSelectElement。
jQuery的：
- on()。
- text()。

如何使用jQuery替换label标签中的HTML

4 个答案: