How to replace the HTML within a label tag using jQuery

Question

I have a label and a select dropdown list:

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

I have tried all kinds of jquery code to replace the HTML inside the label tag and I am having no success:

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

Why do you need the id to have brackets in it? This is probably causing you some issues. The simplest solution would be to give the label a unique ID and use that to update the label. — user1116933
– user1116933, Commented Dec 29, 2014 at 21:21
I have multiple recurrences of this label/select segment -- Over a year ago I solved the bracket problem here on SO by escaping them. The brackets and .closest('label') works elsewhere in my code. Thanks @user1116933 — H. Ferrence
– H. Ferrence, Commented Dec 29, 2014 at 21:23
@H.Ferrence with your id: fiddle. Usage of #serviceID[1] causes incorrect parsing of selector. — Regent
– Regent, Commented Dec 29, 2014 at 21:24
There are many other answers here -- and they should work. However, the way my jQuery code has been structured and built (for over a year now) the .prev() solved it in my particular case. @Regent, if you move your comment to an answer I'll choose it. — H. Ferrence
– H. Ferrence, Commented Dec 29, 2014 at 21:29

Regent · Accepted Answer · 2014-12-29 21:33:12Z

3

.closest() searches through element and its parents. <label> is <select> previous sibling, so you can use .prev() instead:

Small example.

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

Also it's worth to mention that since <select> has brackets in ID, you can select it using [id="serviceID[1]"], but not as #serviceID[1].

And as full example of change event handler:

$('.jq__pickedNewService').on("change", function()
{
    $(this).prev('label').html('Service Replaced');
});

answered Dec 29, 2014 at 21:33

Regent

5,1743 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jmore009 · Accepted Answer · 2014-12-29 21:23:22Z

2

You need to use .change() to get the current value of a select then you can look for the text of the option that was selected (or you could find the value by using $(this).val()):

$("select").change(function(){
  var optionChosen = $(this).find("option:selected").text();
  $("#label").html(optionChosen);   
});

FIDDLE

answered Dec 29, 2014 at 21:23

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

Comments

NRaf · Accepted Answer · 2014-12-29 21:27:14Z

0

If you need to pick the label based on the ID of the select, you can do:

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

The following should also work:

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

answered Dec 29, 2014 at 21:27

NRaf

7,57914 gold badges57 silver badges92 bronze badges

1 Comment

shawnzhu Over a year ago

is right about picking label based on ID instead of depending DOM model. here's a working plunker: plnkr.co/edit/lsdA4k8WFtPA98GtzwyV

David Thomas · Accepted Answer · 2014-12-29 21:41:12Z

I'd suggest, to avoid relying on having to specify, or hard-code, specific <label>s and avoid relying on a specific HTML structure:

// 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);
});

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

References:

JavaScript:
- HTMLSelectElement.
jQuery:
- on().
- text().

Collectives™ on Stack Overflow

How to replace the HTML within a label tag using jQuery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related