Javascript 根据选择框中的选择显示文本框

我有一个应用程序，用户需要在填写表单时进入行业。我们在下拉框中预先做了几个选择，但他也需要手动输入。他可以单击“其他”，并显示一个输入框，要求手动输入

我写的javascript代码解决了我的问题，但是当页面加载时，我可以看到框，即使用户没有选择任何内容。 我如何解决这个问题，所以这只在用户单击“其他”时显示一个复选框，或者在用户单击“其他”一次后单击另一个选项时删除该复选框

HTML代码：p

<tr>
    <td>Industry*</td>
    <td>
        <select name="industry" id="industry" class="validate[required]" onchange="javascript: test()"> 
            <option value="BPO">BPO</option>
            <option value="Call Centre"> Call Centre </option>
            <option value="Software">Software</option>
            <option value="Networking">Networking</option>
            <option value="Management">Management</option>
            <option value="Other">Other</option>
        </select>
    </td>
</tr>
<tr>
    <td></td>
    <td>
        <input type="text" name="industryo" id="industryo" placeholder="Enter Manually">
    </td>
</tr>

工业*
BPO
呼叫中心
软件
网络
管理层
其他

JS

功能测试（）
{
//警惕（“某物”）；
var industry=document.getElementById（'industry'）.value；
如果（行业=“其他”）
{
$（文档）.ready（函数（）{
//调用了.ready（）的处理程序。
$（'#industryo'）.show（）；
});
}
其他的
{
$（文档）.ready（函数（）{
$（“#industryo”）.hide（）；
});
}
}

---

任何建议都是有用的。

您可以在HTML中使用CSS隐藏：

或者在我们的CSS文件中：

#industryo{显示：无；}

或者使用jQuery

//$（document.ready（）的速记
$（function（）{$（“#industryo”）.hide（）；}）；

我想这就是你想要的。首先隐藏输入，然后根据下拉列表是否选择了“其他”显示/隐藏输入。您可以使用on change事件来检查这一点

<script>
function test()
{
  //alert("something");
  var industry = document.getElementById('industry').value;
  if(industry == "Other")
  {
    $( document ).ready(function() {
      // Handler for .ready() called.
      $('#industryo').show();
    });
  }
  else
  {
    $( document ).ready(function() {
      $('#industryo').hide();
    });
  }
}
</script>

//Hide initially
$('#industryo').hide();

$('#industry').on('change', function() {
    if($(this).val() == "Other") {
        $('#industryo').show();
    } else {
        $('#industryo').hide();
    }
});