JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<select id="issue_custom_field_values_6">
    <option value="-1">Cient - ES</option>
    <option value="MESCOM">MESCOM</option>
    <option value="HESCOM">HESCOM</option>
</select>
<p>
    <label for="issue_custom_field_values_38"><span>Client Location(Mescom)</span>
    </label>
    <select class="list_cf" id="issue_custom_field_values_38" name="issue[custom_field_values][38]">
        <option value="">&nbsp;</option>
        <option value="Corporate Office-Mangalore">Corporate Office-Mangalore</option>
        <option value="O&amp;M - Circle-Mangalore">O&amp;M - Circle-Mangalore</option>
        <option value="O&amp;M - Circle-Shimoga">O&amp;M - Circle-Shimoga</option>
        <option value="O&amp;M - Circle-Udupi">O&amp;M - Circle-Udupi</option>
        <option value="O&amp;M - Circle-Chikmagalur">O&amp;M - Circle-Chikmagalur</option>
        <option value="O&amp;M - Zone-Mangalore">O&amp;M - Zone-Mangalore</option>
        <option value="O&amp;M - Division-Mangalore">O&amp;M - Division-Mangalore</option>
        <option value="O&amp;M - Division-Shimoga">O&amp;M - Division-Shimoga</option>
        <option value="O&amp;M - Division-Udupi">O&amp;M - Division-Udupi</option>
        <option value="O&amp;M - Division-Puttur">O&amp;M - Division-Puttur</option>
        <option value="O&amp;M - Division-Chikmagalur">O&amp;M - Division-Chikmagalur</option>
        <option value="O&amp;M - Division-Kadur">O&amp;M - Division-Kadur</option>
        <option value="O&amp;M - Division-Kavoor">O&amp;M - Division-Kavoor</option>
        <option value="O&amp;M - Division-Bhadravathi">O&amp;M - Division-Bhadravathi</option>
        <option value="O&amp;M - Division-Sagar">O&amp;M - Division-Sagar</option>
        <option value="O&amp;M - Division-Shikaripura">O&amp;M - Division-Shikaripura</option>
        <option value="O&amp;M - Division-Bantwal">O&amp;M - Division-Bantwal</option>
        <option value="O&amp;M - Division-Kundapura">O&amp;M - Division-Kundapura</option>
    ...

JavaScript

var sel = $("#issue_custom_field_values_38 option[value='Corporate Office-Hubli']");
  var sel1 = $("#issue_custom_field_values_38");

  if (sel1.value == "MESCOM") {
      sel1.parent().show();
      sel1.siblings().children().text("Client Location(Mescom)");
      sel.nextAll().andSelf().hide();
      sel.prevUntil("#issue_custom_field_values_38 option[value='']").show();
  } else if (sel1.value == "HESCOM") {
      sel1.parent().show();
      sel1.siblings().children().text("Client Location(Hescom)");
      sel.nextAll().andSelf().show();
      sel.prevUntil("#issue_custom_field_values_38 option[value='']").hide();
  } else {
      sel1.parent().hide();
  }

  $("#issue_custom_field_values_6").change(function () {
      if (this.value == "MESCOM") {
          sel1.parent().show();
          sel1.siblings().children().text("Client Location(Mescom)");
          sel.nextAll().andSelf().hide();
          sel.prevUntil("#issue_custom_field_values_38 option[value='']").show();
      } else if (this.value == "HESCOM") {
          sel1.parent().show();
          sel1.siblings().children().text("Client Location(Hescom)");
          sel.nextAll().andSelf().show();
          sel.prevUntil("#issue_custom_field_values_38 option[value='']").hide();
      } else {
          sel1.parent().hide();
      }
  });