CODEWITHSUNDEEP
jquery
Carlos27
Carlos27

Reputation: 185

remove specific char from string depending on the selected dropdown value

I'm trying to remove a specific char from a string depending on the selected val of a dropdown.

What I'm trying to achieve is basically, only if #lang.val() == en, remove the first comma in the addr string.

Here is what I have so far.

$(document).ready(function() {
  $('#mainaddress').change(function() {
    var addr = $(this).find('option:selected').data('addr');
    if ($('#lang').val() == 'fr') {
      $('#theaddress').text(addr);
    } else if ($('#lang').val() == 'en') {
      addr.replace(new RegExp(","), '');
      $('#theaddress').text(addr);
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <select id="lang">
        <option disabled="1" selected="selected" class="succtext">language</option>
        <option value="en">english</option>
        <option value="fr">french</option>
      </select>
</p>
<p>
  <select id="mainaddress">
        <option disabled="1" selected="selected">City</option>
        <option value="" data-addr="11, abc, 90210">New York</option>
        <option value="" data-addr="22, qwe, 57937">Toronto</option>
        <option value="" data-addr="33, asd, 59384">Tokyo</option>
      </select>
</p>
<p>
  <span id="theaddress">-----</span>
</p>

What if the lang is selected after the addr? What's the easiest way to handle this?

Upvotes: 0

Views: 98

Answers (2)

Master Yoda
Master Yoda

Reputation: 4412

First, check if there is more than one comma in the string then replace the comma in the string with an empty character:

  if (addr.match(/,.*,/)) { // Check if there are 2 commas
    addr = addr.replace(',', ''); // Remove the first one
  }

If you want to replace all commas in the string use a regular expression with the g flag:

addr = addr.replace(/,/g , '');

Example

$(document).ready(function() {
  $('#mainaddress').change(function() {
    var addr = $(this).find('option:selected').data('addr');
    if ($('#lang').val() == 'fr') {
      $('#theaddress').text(addr);
    } else if ($('#lang').val() == 'en') {
      if (addr.match(/,.*,/)) { // Check if there are 2 commas
        addr = addr.replace(',', ''); // Remove the first one
        
        //To replace all commas
        //addr = addr.replace(/,/g , '');
      }
      $('#theaddress').text(addr);
    }
  })
});

 $(".subSelect").change(function(){
   $('#mainaddress').trigger("change")
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <select id="lang" class="subSelect">
        <option disabled="1" selected="selected" class="succtext">language</option>
        <option value="en">english</option>
        <option value="fr">french</option>
      </select>
</p>
<p>
  <select id="mainaddress">
        <option disabled="1" selected="selected">City</option>
        <option value="" data-addr="11, abc, 90210">New York</option>
        <option value="" data-addr="22, qwe, 57937">Toronto</option>
        <option value="" data-addr="33, asd, 59384">Tokyo</option>
      </select>
</p>
<p>
  <span id="theaddress">-----</span>
</p>

To handle your issue with selecting address before language you can bind all future events to the .subSelect class selector. This means that if you add other select items they all trigger the change event for #mainaddress.

Upvotes: 0

krishna raikar
krishna raikar

Reputation: 2675

Try this. It will handle situation where he select language after addr selected.

$(document).ready(function() {
   $("#lang").change(function(){
     $('#mainaddress').trigger("change")
   })
   
   $('#mainaddress').change(function() {
     var addr = $(this).find('option:selected').data('addr');
     if(addr==undefined){
       // do nothing
     }
     else if ($('#lang').val() == 'fr') {
       $('#theaddress').text(addr);
       console.log('FRENCH!');
     } else if ($('#lang').val() == 'en') {
       new_text = addr.replace(/,/, '');
       $('#theaddress').text(new_text);
       console.log('ENGLISH!');
     }
   })
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <select id="lang">
    <option disabled="1" selected="selected" class="succtext">language</option>
    <option value="en">english</option>
    <option value="fr">french</option>
    <option value="fr">spanish</option>
  </select>
</p>
<p>
  <select id="mainaddress">
    <option disabled="1" selected="selected">City</option>
    <option value="" data-addr="11, abc, 90210">New York</option>
    <option value="" data-addr="22, qwe, 57937">Toronto</option>
    <option value="" data-addr="33, asd, 59384">Tokyo</option>
  </select>
</p>
<p>
  <span id="theaddress">xxxxxxxxxx</span>
</p>

Upvotes: 2

Related Questions