как показать текстовое поле, когда значение из комбинированного окна выбрано для более чем одного

Question

Я хочу показывать текстовое поле, только когда выбрано значение из поля со списком, в противном случае оно должно быть скрыто.и мне это нужно для более чем одной на одной странице.Я был бы благодарен за вашу помощь.

<label>1- Are there are friends/ neighbours/ family providing help ?</label>
<select class="form-control" name="formlist[any_friends_relatives_help3]" class="selincrease" id="edition"
  onchange="func()" style="height: 5%;">
  <option value="">choose...</option>
  <?php
      if (isset($forms['any_friends_relatives_help3'])) {
      echo  '<option selected="selected" value="' . $forms['any_friends_relatives_help3']. '" disabled>' . $forms['any_friends_relatives_help3'] . '</option>' ;
    echo '<option value="<?=$forms[\'any_friends_relatives_help3\'] ?? \'Yes\'?>">Yes</option>' ;
  echo ' <option value="<?=$forms[\'any_friends_relatives_help3\'] ?? \'No\'?>">No</option>';
  ?>
  <?php  }
    else {?>
  <option value="<?=$forms['any_friends_relatives_help3'] ?? 'Yes'?>">Yes</option>
  <option value="<?=$forms['any_friends_relatives_help3'] ?? 'No'?>">No</option>
  <?php }?>
</select>
<div id="trhide">
  <label>Please Specify:</label><br />
  <textarea class="form-control" name="formlist[specify_help3]"><?=$forms['specify_help3'] ?? ''?></textarea>
</div>

<script type="text/javascript">
  function func() {
    var elem = document.getElementById("edition");

    if (elem.value == "Yes") {
      document.getElementById("trhide").style.visibility = "visible";
    } else {
      document.getElementById("trhide").style.visibility = "hidden";
    }
  }
</script>

, если я использую только вышеупомянутую, она работает, но когда я использую другую для другого выбора, они оба не работают.код для второго описан ниже:

<label>Shopping</label>
<select class="form-control" name="formlist[shopping3]" class="selincrease" id="change" style="height: 5%;"
  required="required">
  <option value="">choose...</option>
  <?php
            if (isset($forms['shopping3'])) {
            echo  '<option selected="selected" value="' . $forms['shopping3']. '" disabled>' . $forms['shopping3'] . '</option>' ;
          echo '<option value="<?=$forms[\'shopping3\'] ?? \'Self\'?>">Self</option>' ;
  echo ' <option value="<?=$forms[\'shopping3\'] ?? \'Other\'?>">Other</option>';


  ?>
  <?php  }
  else {?>
  <option value="<?=$forms['shopping3'] ?? 'Self'?>">Self</option>
  <option value="<?=$forms['shopping3'] ?? 'Other'?>">Other</option>
  <?php }?>
</select><br />
<div id="change2">
  <label>If others, Please Specify</label>
  <br />
  <textarea class="form-control" name="formlist[other_help3]"><?=$forms['other_help3'] ?? ''?></textarea>
  <br />
</div>

<script type="text/javascript">
  function func() {
    var elem = document.getElementById("change");

    if (elem.value == "Other") {
      document.getElementById("change2").style.visibility = "visible";
    } else {
      document.getElementById("change2").style.visibility = "hidden";
    }
  }
</script>

Answer 1

Вы не можете иметь несколько функций с одним и тем же именем.Кроме того, имена ваших функций никогда не должны быть «функциональными», так как они действительно не описательные.Вы также можете объединить обе функции в одну, например:

function changeVisibility(id1, id2, checkValue) {
 var elem = document.getElementById(id1);

 if(elem.value == checkValue) {
    document.getElementById(id2).style.visibility = "visible";
 } else {
   document.getElementById(id2).style.visibility = "hidden";
 }
}