根据来自 select 的输入打开表单 [英] Open form based on input from select
问题描述
有没有办法根据 Bootstrap 3 中表单控件选择的输入打开表单?
我在一个页面上有 3 个表单，我想根据第一个 select 标签中的值 (id) 显示表单.
以前看过这个，但找不到页面，谷歌也没有运气(可能搜索词不好).认为这可以通过隐藏表单直到它被调用来完成.
也可以选择使用 Modal，但我更喜欢将所有内容都放在一个页面上.
更新仍然无法显示表单，即使@Mat 的建议适用于 jsFiddle.上传文件希望有人能发现错误.
<头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>测试页</title><!-- 最新编译和缩小的 CSS --><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- jQuery 库--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!-- 最新编译的 JavaScript --><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><脚本>//$('#myModal').modal('show');$('#formSel').change(function() {var id = $(this).val();if( id != '-' ){$('form').hide();$('#form'+id).show();$('#myModal').modal('show');}});<身体><select id="formSel"><option value="-">选择表单</option><option value="1">表格 1</option><option value="2">表格2</option><option value="3">表格3</option></选择><div id="myModal" class="modalfade"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span><h4 class="modal-title">模态标题</h4><div class="modal-body"><form id="form1"><input type="text" value="form 1"/></form><form id="form2"><input type="text" value="form 2"/></form><form id="form3"><input type="text" value="form 3"/></form>
</div><!--/.modal-content --></div><!--/.modal-dialog --></div><!--/.modal --></html>
UPDATE:看看这个 Fiddle http://jsfiddle.net/blocknotes/Luh1w87d/
修改您的选择:
在你的模态里面你放了 3 个表格，比如:
<form id="form2">...</form><form id="form3">...</form>使用jQuery:
$('#formSel').change( function() {var id = $(this).val();if( id != '-' ){$('form').hide();$('#form'+id).show();$('#myModal').modal('show');}});Is there a way to open a form based on input from Form Control Select in Bootstrap 3?
I have 3 forms on a page and would like to display the form based on value (id) from the first select tag.
Have seen this done before, but can't find the page, no luck on Google either (maybe bad search terms). Thinking this can be done by hiding the forms until it's called.
There's also the option of using Modal, but I prefer having it all on one page for this particular matter.
UPDATE Still can't display forms, even though @Mat's suggestion works on jsFiddle. Uploading file in hope that someone can spot the error.
<!DOCTYPE html>
<html>
<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>Testpage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
//$('#myModal').modal('show');
$('#formSel').change( function() {
var id = $(this).val();
if( id != '-' )
{
$('form').hide();
$('#form'+id).show();
$('#myModal').modal('show');
}
});
</script>
</head>
<body>
<select id="formSel">
<option value="-">Select a form</option>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
<option value="3">Form 3</option>
</select>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form id="form1"><input type="text" value="form 1" /></form>
<form id="form2"><input type="text" value="form 2" /></form>
<form id="form3"><input type="text" value="form 3" /></form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
UPDATE: take a look at this Fiddle http://jsfiddle.net/blocknotes/Luh1w87d/
Modify your select:
<select id="formSel">
<option value="-">Select a form</option>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
<option value="3">Form 3</option>
</select>
And inside your modal you put 3 forms like:
<form id="form1">...</form>
<form id="form2">...</form>
<form id="form3">...</form>
Use jQuery:
$('#formSel').change( function() {
var id = $(this).val();
if( id != '-' )
{
$('form').hide();
$('#form'+id).show();
$('#myModal').modal('show');
}
});
这篇关于根据来自 select 的输入打开表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
