Javascript 当从组合框中选择多个值时，如何显示文本框

我只想在选择组合框中的值时显示文本框，否则它应该隐藏。我需要在同一页中有多个。我将感谢你的帮助

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

1-是否有朋友/邻居/家人提供帮助？
选择。。。
函数func（）{
var elem=document.getElementById（“版本”）；
如果（元素值=“是”）{
document.getElementById（“trhide”）.style.visibility=“可见”；
}否则{
document.getElementById（“trhide”）.style.visibility=“hidden”；
}
}

如果我只使用上面的一个选项，它是有效的，但是当我使用另一个选项进行另一个选择时，这两个选项都不起作用 工作第二个的代码描述如下：

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

购物
选择。。。


函数func（）{
var elem=document.getElementById（“变更”）；
如果（元素值=“其他”）{
document.getElementById（“change2”）.style.visibility=“可见”；
}否则{
document.getElementById（“change2”）.style.visibility=“hidden”；
}
}

不能有多个同名函数。此外，函数名永远不应该是“func”，因为它们实际上是非描述性的。您还可以将这两个函数合并为一个函数，例如：

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";
 }
}

---

谢谢你的评论。那么，在我的例子中，如何调用刚才添加的函数？对不起，要求太多了。我真的很困惑，因为我不知道Javascript@yoko ishiokait现在正在工作，非常感谢，但是当输入文本被隐藏时，它显示的是空格而不是空格。你知道怎么修吗？