使用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.

1. If Commodity is Ecommerce then label text will be WEIGHT(KG).
2. If Commodity is Machinery or Electronics then label text will be CARGO VALUE.
3. 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'); } }); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col-6"> <label>COMMODITY</label> <select class="form-control" id="commoditySelect"> <option value="Ecommerce">E-Commerce</option> <option value="Machinery">Machinery</option> <option value="Plastics">Plastics</option> <option value="Clothing & Textile">Clothing & Textile</option> <option value="Eyewear">Eyewear</option> <option value="Electronics">Electronics</option> <option value="Personal Effects">Personal Effects</option> <option value="Automobile Spares">Automobile Spares</option> <option value="Food Products">Food Products</option> <option value="Livestock Feed">Livestock Feed</option> <option value="Cosmetics">Cosmetics</option> <option value="Chemicals">Chemicals</option> <option value="Pharmaceutical Products">Pharmaceutical Products</option> <option value="Fertilizer">Fertilizer</option> <option value="Rubber">Rubber</option> <option value="Wood">Wood</option> <option value="Paper">Paper</option> <option value="Printed Material">Printed Material</option> <option value="Scrap">Scrap</option> <option value="Footwear">Footwear</option> <option value="Cement">Cement</option> <option value="Ceramic">Ceramic</option> <option value="Glass">Glass</option> <option value="Metals">Metals</option> <option value="General Cargo">General Cargo</option> </select> </div> <div class="col-6"> <label id="commodityLabel">WEIGHT (KG)</label> <input type="text" class="form-control" placeholder="Default Input" /> </div> </div> </div>

Answer 1

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

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col-6"> <label>COMMODITY</label> <select class="form-control" id="commoditySelect"> <option value="Ecommerce">E-Commerce</option> <option value="Machinery">Machinery</option> <option value="Plastics">Plastics</option> <option value="Clothing & Textile">Clothing & Textile</option> <option value="Eyewear">Eyewear</option> <option value="Electronics">Electronics</option> <option value="Personal Effects">Personal Effects</option> <option value="Automobile Spares">Automobile Spares</option> <option value="Food Products">Food Products</option> <option value="Livestock Feed">Livestock Feed</option> <option value="Cosmetics">Cosmetics</option> <option value="Chemicals">Chemicals</option> <option value="Pharmaceutical Products">Pharmaceutical Products</option> <option value="Fertilizer">Fertilizer</option> <option value="Rubber">Rubber</option> <option value="Wood">Wood</option> <option value="Paper">Paper</option> <option value="Printed Material">Printed Material</option> <option value="Scrap">Scrap</option> <option value="Footwear">Footwear</option> <option value="Cement">Cement</option> <option value="Ceramic">Ceramic</option> <option value="Glass">Glass</option> <option value="Metals">Metals</option> <option value="General Cargo">General Cargo</option> </select> </div> <div class="col-6"> <label id="commodityLabel">WEIGHT (KG)</label> <input type="text" class="form-control" placeholder="Default Input" /> </div> </div> </div>

Answer 2

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

Answer 3

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

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col-6"> <label>COMMODITY</label> <select class="form-control" id="commoditySelect"> <option value="Ecommerce">E-Commerce</option> <option value="Machinery">Machinery</option> <option value="Plastics">Plastics</option> <option value="Clothing & Textile">Clothing & Textile</option> <option value="Eyewear">Eyewear</option> <option value="Electronics">Electronics</option> <option value="Personal Effects">Personal Effects</option> <option value="Automobile Spares">Automobile Spares</option> <option value="Food Products">Food Products</option> <option value="Livestock Feed">Livestock Feed</option> <option value="Cosmetics">Cosmetics</option> <option value="Chemicals">Chemicals</option> <option value="Pharmaceutical Products">Pharmaceutical Products</option> <option value="Fertilizer">Fertilizer</option> <option value="Rubber">Rubber</option> <option value="Wood">Wood</option> <option value="Paper">Paper</option> <option value="Printed Material">Printed Material</option> <option value="Scrap">Scrap</option> <option value="Footwear">Footwear</option> <option value="Cement">Cement</option> <option value="Ceramic">Ceramic</option> <option value="Glass">Glass</option> <option value="Metals">Metals</option> <option value="General Cargo">General Cargo</option> </select> </div> <div class="col-6"> <label id="commodityLabel">WEIGHT (KG)</label> <input type="text" class="form-control" placeholder="Default Input" /> </div> </div> </div>