根据下拉列表显示表单

时间：2018-06-25 17:57:42

标签： javascript jquery html

对不起，如果已经问到了，但是我找不到解决方案。我目前有一个下拉列表，根据下拉列表中选择的选项值，将显示不同的表单。因此，例如，如果我在下拉列表框中有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();
    });

3 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

因为您的jquery代码错误。您必须执行以下操作：

$(function() {
  $("#state").on('change',function() {
    $("form").hide();
    if($(this).val()=="nsw")
      $("#testform").show();
    else if($(this).val()=="qld")
      $("#testform2").show();
  });
});

答案 2 :(得分：0)

您的jQuery代码不正确。您使用.on，但未指定哪个事件。基本上就像说“在……什么？”。此外，您无需为更改事件使用.on。只需使用.change。

我认为处理此问题的最干净方法是使用switch语句。

$("#state").change(function(){
    stateChange($(this).val());
});

function stateChange(stateValue){
    $("form").hide();

    switch(stateValue){
     case 'nsw':
        $("#testform").show();
      ;
     case 'qld':
        $("#testform2").show();
      ;
     // so on and so on...
  }
}

这里有一个有效的JSFiddle供您使用。基本上就是您所有的代码。

希望这会有所帮助。

相关问题
最新问题