CODEWITHSUNDEEP
htmljquery
Rahul Panwar
Rahul Panwar

Reputation: 100

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

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/[email protected]/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>

Upvotes: 3

Views: 2061

Answers (3)

Carsten Massmann
Carsten Massmann

Reputation: 28236

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/[email protected]/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>

Upvotes: 0

Mudassir Ahmed
Mudassir Ahmed

Reputation: 11

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

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

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');
    }
  });
});
<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/[email protected]/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>

Upvotes: 2

Related Questions