Question

我想根据所选内容在我的表单上显示不同的区域。我可以这样做是JavaScript但想使用Jquery，因为效果看起来好多了。

我在网上看过很多Jquery示例，但我看不出如何将它实现到我的表单中。

是否可以在我的表单上向我展示一个示例，我将能够完成其余的工作。

<!DOCTYPE html>
<html lang="en">


<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Basic Form</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


</head>
<body>


<div class="container">
    <div class="row">
      <div class="content-main col-md-12">
        <form>	
        <img src="img/logo.png">
        <br><br>
        Metsa Wood Quick Estimation tool
        <br><br>
<div class="col-md-9">	


 <fieldset class="form-group">
    <label for="exampleSelect1">Type of Construction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Traditional Masonry</option>
      <option>Timber Frame</option>
      </select>
  </fieldset>


<!-- Below will only show if Timber Frame is selected -->
  
  <fieldset class="form-group">
    <label for="PartyWalls">Which walls are party walls?</label>
	   <br><input type="checkbox"> W1
	   <br><input type="checkbox"> W2
	   <br><input type="checkbox"> W3
	   <br><input type="checkbox"> W4
  </fieldset>
<!-- Above will only show if Timber Frame is selected -->



  <fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>
  
    
  <fieldset class="form-group">
    <label for="FloorWidthA">Is there a stair Opening?</label>
  <br><input type="checkbox">
  </fieldset>

  
  <!-- Below will only show if Stair Opening is checked -->
   <fieldset class="form-group">
    <label for="FloorWidthA">Opening width C(X)</label>
    <input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
    <label for="FloorWidthA">Opening width D(X)</label>
    <input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
  </fieldset>
<!-- Above will only show if Stair Opening is checked -->

  
  
  
   <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

      <div class="col-md-3">
        <img src="img/drawing.jpg">
      </div>
    </div>
  </div>
</div>
  
  
  
  
  
  <!--
  
  <fieldset class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
  <div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  
  
  -->
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

</body>

</html>

Answer 1

首先为要显示和隐藏的元素提供id。

默认情况下，显示无。
根据事件（点击，更改..等），让它们显示和隐藏。

＆＃13;

<!DOCTYPE html>
<html lang="en">


<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Basic Form</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


</head>
<body>


<div class="container">
    <div class="row">
      <div class="content-main col-md-12">
        <form>	
        <img src="img/logo.png">
        <br><br>
        Metsa Wood Quick Estimation tool
        <br><br>
<div class="col-md-9">	


 <fieldset class="form-group">
    <label for="exampleSelect1">Type of Construction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Traditional Masonry</option>
      <option>Timber Frame</option>
      </select>
  </fieldset>


<!-- Below will only show if Timber Frame is selected -->
  
  <fieldset class="form-group" id="tempId" style="display:none;">
    <label for="PartyWalls">Which walls are party walls?</label>
	   <br><input type="checkbox"> W1
	   <br><input type="checkbox"> W2
	   <br><input type="checkbox"> W3
	   <br><input type="checkbox"> W4
  </fieldset>
<!-- Above will only show if Timber Frame is selected -->



  <fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>
  
    
  <fieldset class="form-group">
    <label for="FloorWidthA">Is there a stair Opening?</label>
  <br><input type="checkbox" id="FLoorAId">
  </fieldset>

  
  <!-- Below will only show if Stair Opening is checked -->
   <fieldset class="form-group" id="tempId2" style="display:none;">
    <label for="FloorWidthA">Opening width C(X)</label>
    <input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
    <label for="FloorWidthA">Opening width D(X)</label>
    <input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
  </fieldset>
<!-- Above will only show if Stair Opening is checked -->

  
  
  
   <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

      <div class="col-md-3">
        <img src="img/drawing.jpg">
      </div>
    </div>
  </div>
</div>
  
  
  
  
  
  <!--
  
  <fieldset class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
  <div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  
  
  -->
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" ></script>
   

    <script>
       
        $(document).on('change','#TypeOfConstruction',function() {
         if($("#TypeOfConstruction option:selected").text()=='Timber Frame'){
          $('#tempId').show();
         }else{
          $('#tempId').hide();
            }
        });
        $(document).on('click','#FLoorAId',function() {
         if($("#FLoorAId").is(':checked')){
          $('#tempId2').show();
         }else{
          $('#tempId2').hide();
            }
   });
       
    </script>
</body>

</html>

＆＃13;

Answer 2

试试这个。它将slideUp / slideDown，具体取决于所选的选项。

列表项
为选择选项增加了价值。
在文件末尾添加了js代码。
最初隐藏了timer-frame-fieldset。
如果选择了计时器框，则向下滑动计时器框架字段集，否则为slideUp。

希望它有所帮助...

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Basic Form</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


</head>
<body>


<div class="container">
    <div class="row">
      <div class="content-main col-md-12">
        <form>  
        <img src="img/logo.png">
        <br><br>
        Metsa Wood Quick Estimation tool
        <br><br>
<div class="col-md-9">  


 <fieldset class="form-group">
    <label for="exampleSelect1">Type of Construction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option value="traditional-masonry">Traditional Masonry</option>
      <option value="timber-frame">Timber Frame</option>
      </select>
  </fieldset>


<!-- Below will only show if Timber Frame is selected -->
  
  <fieldset class="form-group" style="display:none;" id="timber-frame-fieldset">
    <label for="PartyWalls">Which walls are party walls?</label>
     <br><input type="checkbox"> W1
     <br><input type="checkbox"> W2
     <br><input type="checkbox"> W3
     <br><input type="checkbox"> W4
  </fieldset>
<!-- Above will only show if Timber Frame is selected -->



  <fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>
  
    
  <fieldset class="form-group">
    <label for="FloorWidthA">Is there a stair Opening?</label>
  <br><input type="checkbox">
  </fieldset>

  
  <!-- Below will only show if Stair Opening is checked -->
   <fieldset class="form-group">
    <label for="FloorWidthA">Opening width C(X)</label>
    <input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
    <label for="FloorWidthA">Opening width D(X)</label>
    <input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
  </fieldset>
<!-- Above will only show if Stair Opening is checked -->

  
   <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

      <div class="col-md-3">
        <img src="img/drawing.jpg">
      </div>
    </div>
  </div>
</div>
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){
  $("#TypeOfConstruction").on("change", function(e){
    var v = $(this).val();
    if(v == 'timber-frame') {
      $("#timber-frame-fieldset").slideDown();
    } else {
      $("#timber-frame-fieldset").slideUp();
    }
  });
});
</script>

</body>

</html>

Answer 3

这样做。这对你有帮助

＆＃13;

<!DOCTYPE html>
<html lang="en">


<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Basic Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<style type="text/css">
  .wfiedls{
    display: none;
    
  }

  ba
</style>

</head>
<body>


<div class="container">
    <div class="row">
      <div class="content-main col-md-12">
        <form>	
        <img src="img/logo.png">
        <br><br>
        Metsa Wood Quick Estimation tool
        <br><br>
<div class="col-md-9">	


 <fieldset class="form-group">
    <label for="exampleSelect1">Type of Construction</label>
    <select class="form-control" id="TypeOfConstruction">
      <option>Traditional Masonry</option>
      <option>Timber Frame</option>
      </select>
  </fieldset>


<!-- Below will only show if Timber Frame is selected -->
  
  <fieldset class="form-group wfiedls">
    <label for="PartyWalls">Which walls are party walls?</label>
	   <br><input type="checkbox"> W1
	   <br><input type="checkbox"> W2
	   <br><input type="checkbox"> W3
	   <br><input type="checkbox"> W4
  </fieldset>
<!-- Above will only show if Timber Frame is selected -->



  <fieldset class="form-group">
    <label for="FloorWidthA">Floor Width A(X)</label>
    <input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
  
    <label for="FloorWidthB">Floor Width B(X)</label>
    <input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
   <!-- <small class="text-muted">This is the text for A</small>-->
  </fieldset>
  
    
  <fieldset class="form-group">
    <label for="FloorWidthA">Is there a stair Opening?</label>
  <br><input type="checkbox">
  </fieldset>

  
  <!-- Below will only show if Stair Opening is checked -->
   <fieldset class="form-group">
    <label for="FloorWidthA">Opening width C(X)</label>
    <input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
    <!--<small class="text-muted">This is the text for A</small>-->
    <label for="FloorWidthA">Opening width D(X)</label>
    <input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
  </fieldset>
<!-- Above will only show if Stair Opening is checked -->

  
  
  
   <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

      <div class="col-md-3">
        <img src="img/drawing.jpg">
      </div>
    </div>
  </div>
</div>
  
  
 <script type="text/javascript">
   $(document).ready(function(){
    $("#TypeOfConstruction").on('change',function(){
      var selectedBalue = $("#TypeOfConstruction").val();
      if (selectedBalue == "Timber Frame") 
      {
        $(".wfiedls").slideDown(500);
      }
      else{
        $(".wfiedls").slideUp(500);
      }
    }); 
   

    

    
    
   });
 </script> 
  
  


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

</body>

</html>

＆＃13;

显示/隐藏表单区域（使用bootstrap）

3 个答案: