根据下拉值显示表单的输入字段

Question

我有一个包含下拉列表和其他2个输入字段的表单，最初我只想显示下拉列表并隐藏其他两个字段，并且当dropdown的值是other时显示其他两个字段。

<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输入字段将首先显示并且仅在dropdown的值是其他值时才显示它们。

Answer 1

您可以使用javascript。 首先，将输入字段设置为在div内隐藏的谁扭曲。 根据选择的选项值将onchange用于动态条件。

检查此示例。

 function func(value) { if (value == 'other') { $('#input_field').show(); } else { $('#input_field').hide(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %} <fieldset> <select name="one" onchange="func(this.value)"> <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> <div id="input_field" style="display:none;"> <br> 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"> </fieldset> </form>

Answer 2

Javascript解决方案

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

根据下拉值显示表单的输入字段

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-05-07 06:40:53

解决方案2
0 2019-05-07 06:54:44

根据下拉值显示表单的输入字段

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-05-07 06:40:53

解决方案2 0 2019-05-07 06:54:44

解决方案1
1 已采纳 2019-05-07 06:40:53

解决方案2
0 2019-05-07 06:54:44