时间戳

首页 > 解决方案 > 根据下拉列表显示表单

javascript - 根据下拉列表显示表单

问题描述

对不起，如果这已经被问到但我找不到解决方案。我目前有一个下拉列表，根据选择下拉列表中的选项值，将显示不同的表单。因此，如果我在下拉列表框中有例如 10 个值，则每个值如果被选中将显示不同的形式。

<select id="state" name="state">
        <option value="nsw">New South Wales</option>
        <option value="qld">Queensland</option>
        <option value="vic">Victoria</option>
        <option value="nt">Northern Territory</option>
        <option value="tas">Tasmania</option>
        <option value="sa">South Australia</option>
        <option value="wa">Western Australia</option>
        <option value="act">Australian Capital Territory</option>
        <option value="notinoz">Not in Australia</option>
</select>

<form id="testform">
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

<form id="testform2">
      <div class="form-group">
        <label for="exampleFormControlInput1">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
      </div>
      <div class="form-group">
        <label for="exampleFormControlSelect1">Example select</label>
        <select class="form-control" id="exampleFormControlSelect1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleFormControlSelect2">Example multiple select</label>
        <select multiple class="form-control" id="exampleFormControlSelect2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      </div>
    </form>

这些是不工作的测试 javascript 函数。 

$("#nsw").on(function () {
    $("#testform").toggle();
});

$("#qld").on(function () {
        $("#testform2").toggle();
    });

标签： javascriptjqueryhtml

解决方案

您的 Jquery 代码错误，请检查我的解决方案。

我从下拉列表中获得了选定的值（在更改事件中），并根据

下面示例下拉检查的选定值显示了相关表格并进行了必要的更改..

$("#state").change(function() {
  let state = this.value; //get state

  $('.state-form').hide(); //hide all forms

  $("#form-" + state).show(); //show only related form
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="state" name="state">
  <option value="">--- Please Select ---</option>
  <option value="nsw">New South Wales</option>
  <option value="qld">Queensland</option>
</select>

<form id="form-nsw" class="state-form" style="display:none;">
  <hr> new south wales form
  <hr>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

<form id="form-qld" class="state-form" style="display:none;">
  <hr> Queensland form
  <hr>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

推荐阅读