How to retain value of field in JS

Question

I have one multi-select field whose values are coming from one table which has the following data.

Desc      | Code
----------------
India     | IN
Australia | AUS
Other     | OTH

Requirement: In that multi-select field if Other then a new field is getting populated as Please specify (Others) in which we will add some text value.

1. If I am selecting India, Other, Australia then the Please specify (others) should be enabled and the text which the user has written should be retained in please specify others field.

2. If I am selecting India, Other then removing Other and again selecting other then value of Please specify(others) should be blank.

Problem: When I am selecting India, Other, Australia then the Please specify (others) field value is getting nullified.

My attempt:

function showHideOthers() {
    var selectedValue = $("#field_id_ui").val();
    if (null !== selectedValue) {
        for (var i = 0; i < selectedValue.length; i++) {
            if (selectedValue[i] == "OTH") {
                $("#Others_section").show();
            } else {
                $("#Others_section").hide();
                $("#Others_section").val("");
            }
        }
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }
}

The fields for show and hide are taken from VTL file.

"#field_id_ui" - This is storing all the selected value in the form of array. For e.g [AUS, IN, OTH]

Answer 1

The logic for hiding "other" depending on the contents of $("#field_id_ui").val() is slightly wrong. Here's a simple approach you can try. See the docs for Array.includes.

function showHideOthers() {
    var selectedValue = $("#field_id_ui").val();
    // the rest of the code assumes that selectedValue is an array
    if (selectedValue.includes("OTH")) {
      $("#Others_section").show();
    } else {
      $("#Others_section").hide();
      $("#Others_section").val("");
    }
}

Answer 2

Your issue is with this code:

if (selectedValue[i] == "OTH") {

which runs on every loops. So if your selected values ["OTH", "IND"] then the other input will be shown, then immediately hidden by the "IND" value.

Add a break inside the if and your code will work fine regardless of the order of select values.

this assumes your HTML is built to match the provided javascript (which we've not seen).

Updated code

function showHideOthers() {
  var selectedValue = $("#field_id_ui").val();
  //console.log(selectedValue);

  if (null !== selectedValue) {
    for (var i = 0; i < selectedValue.length; i++) {
      if (selectedValue[i] == "OTH") {
        $("#Others_section").show();
        
        // with break; code stops as soon as OTH is found
        break;
      } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
      }
    }
  } else {
    $("#Others_section").hide();
    $("#Others_section").val("");
  }
}

$("#field_id_ui").change(showHideOthers);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id='field_id_ui'>
  <option value="IND">India</option>
  <option value="OTH">Other</option>
</select>
<input id='Others_section' />

---

Snippet showing your code not working if OTH is not last value

function showHideOthers() {
    //var selectedValue = $("#field_id_ui").val();
    //console.log(selectedValue);
    
    // other at the start fails
    selectedValue = ["OTH", "IND"];
    // other at the end works fine
    //selectedValue = ["IND", "OTH"];
    
    if (null !== selectedValue) {
        for (var i = 0; i < selectedValue.length; i++) {
          if (selectedValue[i] == "OTH") {
            $("#Others_section").show();
          } else {
                $("#Others_section").hide();
                $("#Others_section").val("");
            }
        }
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }
}

//$("#field_id_ui").change(showHideOthers);
showHideOthers();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id='field_id_ui'>
<option value="IND">India</option>
<option value="OTH">Other</option>
</select>
<input id='Others_section'/>

Snippet showing your code working if OTH is the last value

function showHideOthers() {
    //var selectedValue = $("#field_id_ui").val();
    //console.log(selectedValue);
    
    // other at the start fails
    //selectedValue = ["OTH", "IND"];
    // other at the end works fine
    selectedValue = ["IND", "OTH"];
    
    if (null !== selectedValue) {
        for (var i = 0; i < selectedValue.length; i++) {
          if (selectedValue[i] == "OTH") {
            $("#Others_section").show();
          } else {
                $("#Others_section").hide();
                $("#Others_section").val("");
            }
        }
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }
}

//$("#field_id_ui").change(showHideOthers);
showHideOthers();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id='field_id_ui'>
<option value="IND">India</option>
<option value="OTH">Other</option>
</select>
<input id='Others_section'/>