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解决方案

/**
 * A all-in-one spy and mock function
 * @param {object} obj
 * @param {string} name
 * @param {function} mockFunction
 */
export function spyUtil(obj, name, mockFunction = undefined) {
  const spy = jest.spyOn(obj, name);
  let mock;
  if (mockFunction) {
    mock = jest.fn(mockFunction);
    obj[name].mockImplementation(mock);
  }
  return { spy, mock };
}

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

2 个答案: