时间戳

首页 > 解决方案 > Change text of label on changing of select box option using jquery?

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

标签： htmljquery

解决方案

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

推荐阅读