显示/隐藏表单区域（我使用引导程序）
[英]Show/hide areas of form (im using bootstrap)
问题描述
I would like to show different areas on my form dependent on what is selected.
我想根据选择的内容在表单上显示不同的区域。 I can do this is JavaScript but would like to use Jquery as the effects look much better.我可以用 JavaScript 来做到这一点，但我想使用 Jquery，因为效果看起来好多了。
I've seen lots of Jquery examples on the net but I cannot see how to implement it into my form.我在网上看到了很多 Jquery 示例，但我看不到如何将它实现到我的表单中。
Would it be possible to show me one as an example on my form and I will be able to do the rest.是否可以在我的表格上向我展示一个作为示例，我将能够完成其余的工作。
<!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—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>
3 个解决方案
解决方案1
3 2016-03-17 11:01:01
First give id to the element which you want to show and hide.首先为要显示和隐藏的元素指定 id。
- By default make it display none.默认情况下，让它不显示。
- According to the event(click, change..etc) make them show and hide.根据事件（点击、更改等）使它们显示和隐藏。
<!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—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>
解决方案2
2 已采纳 2016-03-17 11:07:37
do like this.this will help to you这样做。这对你有帮助
<!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; } </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>
解决方案3
1 2016-03-17 10:38:00
try this.试试这个。 it will slideUp/slideDown depending on the option selected.它会根据选择的选项向上滑动/向下滑动。
- List item列表项
- added value to the select options.为选择的选项增加了价值。
- js code added at the end of the file. js 代码添加到文件末尾。
- initially hiding the timer-frame-fieldset.最初隐藏计时器帧字段集。
- if timer frame selected then slideDown the timer-frame-fieldset else slideUp.如果选择了定时器帧，则向下滑动定时器帧字段集，否则向上滑动。
hope it helps...希望它有帮助...
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
显示隐藏表单元素Jquery / Bootstrap - Show hide form elements Jquery/Bootstrap
使用引导程序隐藏和显示字段时，MVC 表单值未传递给 JavaScript - MVC form Value not passed to JavaScript when using bootstrap to hide and show field
使用javascript隐藏和显示引导警报 - hide and show bootstrap alert using javascript
使用javascript显示和隐藏bootstrap工具提示 - Show and hide bootstrap tooltip using javascript
在MVC视图中显示/隐藏文本区域 - Show/hide text areas in mvc view
JavaScript 使用选择选项隐藏和显示表单 - JavaScript to hide and show form using select option
使用 jquery 方法 show() 和 hide() 进行表单验证 - Form validation using jquery method show() and hide()
使用单选按钮显示/隐藏表单元素 - show/hide Form element using radio button
在引导程序中隐藏和显示按钮 - hide and show buttons in bootstrap
在引导程序中隐藏/显示卡片 - Hide/show cards in bootstrap
相关标签