Question

我有一个应用程序，用户在填写表单时需要输入Industry。我们在下拉框中有几个预先选择的选项，但他还需要手动输入。他可以单击“其他”，并显示一个输入框，询问手动输入。

我已经编写了这个javascript代码，它解决了我的目的，但是当页面加载时......即使用户没有选择任何内容，我也能看到那里的框。我该如何解决这个问题，所以这只会在用户点击其他时显示一个复选框，或者如果用户在点击其他选项后点击另一个选项，则会删除该复选框。

HTML code：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>

JS

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

任何建议都有帮助。

Answer 1

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

<input type="text" 
       name="industryo" 
       id="industryo" 
       placeholder="Enter Manually"
       style="display: none;" />

或在我们的 CSS 文件中：

#industryo { display: none; }

或 jQuery ：

<script>
    // Shorthand for $( document ).ready()
    $(function() { $("#industryo").hide(); });
</script>

Answer 2

我认为这就是你想要的。最初隐藏您的输入，然后显示/隐藏它，具体取决于下拉菜单是否选择了“其他”。您可以使用on change事件来检查。

Demo here

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

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

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

2 个答案: