Change text of label on changing of select box option using jquery?

Question

I have a select box with multiple option and I want to change the other label text on the base of select box option. I have 3 value for label WEIGHT(KG)/CARGO VALUE/NO. OF SHIPMENT and I am using jquery to changing label text, but only WEIGHT(KG) and CARGO VALUE is changing not the NO. OF SHIPMENT.

and here is the condition to change label text.

If Commodity is Ecommerce then label text will be WEIGHT(KG).
If Commodity is Machinery or Electronics then label text will be CARGO VALUE.
and rest for all option label text will be NO. OF SHIPMENT.

Please help.

$(function() {
  $('#commoditySelect').change(function() {
    if ($('#commoditySelect').val() == 'Ecommerce') {
      $('#commodityLabel').text('WEIGHT (KG)');
    } else if ($('#commoditySelect').val() == 'Machinery' || 'Electronics') {
      $('#commodityLabel').text('CARGO VALUE');
    } else {
      $('#commodityLabel').text('NO. OF SHIPMENT');
    }
  });
});






  
    
      COMMODITY
      
    
    
      WEIGHT (KG)

user_13669048 · Answer

You need to define the || in the elseif like this => $(this).val() == 'Electronics' for the last else to trigger so that the label is change to NO. OF SHIPMENT if no condition matches.

Also, instead of using #commoditySelect again and again you can simply use $(this)

$(this) refers to the element where the change event is occurring

Live Working Demo:

$(function() {
  $('#commoditySelect').change(function() {
    if ($(this).val() == 'Ecommerce') {
      $('#commodityLabel').text('WEIGHT (KG)');
    } else if ($(this).val() == 'Machinery' || $(this).val() == 'Electronics') {
      $('#commodityLabel').text('CARGO VALUE');
    } else {
      $('#commodityLabel').text('NO. OF SHIPMENT');
    }
  });
});






  
    
      COMMODITY
      
    
    
      WEIGHT (KG)

user_14202894 · Answer

There is a mistake in your jQuery code in the second if statement. You need to check the conditioning after the || too. Here is the working code in my CodePen https://codepen.io/TheLazyPanda/pen/ZEWajVO .

$(function() {
  $('#commoditySelect').change(function() {
    if ($('#commoditySelect').val() === 'Ecommerce') {
      $('#commodityLabel').text('WEIGHT (KG)');
    } else if ($('#commoditySelect').val() === 'Machinery' || $('#commoditySelect').val() === 'Electronics') {

      $('#commodityLabel').text('CARGO VALUE');
    } else {
      $('#commodityLabel').text('NO. OF SHIPMENT');
    }
  });
});

user_2610061 · Answer

This version does the same thing:

$('#commoditySelect').change(function() {
    const labels={Ecommerce:'WEIGHT (KG)',Machinery:'CARGO VALUE',Electronics:'CARGO VALUE'};
     $('#commodityLabel').text(labels[$(this).val()] || 'NO. OF SHIPMENT');
});






  
    
      COMMODITY
      
    
    
      WEIGHT (KG)

Change text of label on changing of select box option using jquery?

3 Answers