Javascript 根据下拉列表的值显示窗体的输入字段_Javascript_Html

Javascript 根据下拉列表的值显示窗体的输入字段

javascript html

Javascript 根据下拉列表的值显示窗体的输入字段,javascript,html,Javascript,Html,我有一个表单，其中包含一个下拉列表和两个其他输入字段。最初我只想显示下拉列表，隐藏其他两个字段，并在下拉列表的值为其他时显示其他两个字段 <form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %} <fieldset> <select name="one" onchange="if (this.value=='other'){this.fo

我有一个表单，其中包含一个下拉列表和两个其他输入字段。最初我只想显示下拉列表，隐藏其他两个字段，并在下拉列表的值为其他时显示其他两个字段

<form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %}
  <fieldset>
    <select name="one" onchange="if (this.value=='other'){this.form['datefrom'].style.visibility='visible'}else {this.form['datefrom'].style.visibility='hidden'};">
            <option value="none" selected="selected">Select...</option>
            <option value = "1m" >1 month</option>
            <option value = "2m">2 months</option>
            <option value = "3m">3 months</option>
            <option value = "other">other</option>
    </select>
    <br> From:
    <br>
    <input type="datetime-local" name="datefrom"><br> To:
    <br>
    <input type="datetime-local" name="dateto"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

在我的代码中，最初所有的输入字段都会显示。因此，如果有人能告诉我如何隐藏和最初显示两个datetime输入字段，并且仅当下拉列表的值为其他值时才显示它们。如果有任何帮助，我们将不胜感激。

您可以使用javascript。首先，将输入字段设置为hidden who warp in div。根据您的选择选项值，对动态条件使用onchange

检查这个例子

函数函数值{ 如果值=='其他'{ $‘输入\字段’。显示； }否则{ $'input_field'。隐藏； } } {%csrf_令牌%} 选择 1个月 2个月三个月另外发件人：致： Javascript解决方案

如果你向我们表明你在努力帮助自己，我们将乐意提供帮助。您可以通过发布一些您试图实现的代码来向我们展示。我已经发布了代码。如果this.value='other'{this.form['datefrom'].style.visibility='visible'}或者{this.form['datefrom'].style.visibility='hidden'}的话，我就尝试了这个方法。但是最初不会隐藏输入框，只有在我选择某个值时才会隐藏它。@Miller，这是因为只有更改选择框时才会触发这些事件。您可以使用document.ready将输入框的初始状态设置为隐藏。或者在设计HTML本身时，您可以添加style属性来隐藏元素。因此，您添加了javascript标记，所以我给出了这个解决方案@miller

<!DOCTYPE html>
<html>
<head>
<style>
.cs-hide{
    display:none;
}
</style>
</head>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
   <option value = "1m" >1 month</option>
  <option value = "2m">2 months</option>
  <option value = "3m">3 months</option>
  <option value = "other">other</option>
</select>
<br>
<div id="dateContainer" class="cs-hide">
   From:<br>
  <input type="datetime-local" name="datefrom"><br>
   To:<br>
  <input type="datetime-local" name="dateto"><br><br>
</div>
  <input type="submit" value="Submit">


<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  var element = document.getElementById("dateContainer");
  if(x === "other"){
    element.classList.remove("cs-hide");
  }else{
    element.classList.add("cs-hide");
  }
}
</script>

</body>
</html>