Question

有没有办法根据Bootstrap 3中的Form Control Select输入打开表单？

我在页面上有3个表单，并希望根据第一个选择标记中的值（id）显示表单。

之前已经看过这个，但无法找到该页面，也没有在谷歌上运气（可能是糟糕的搜索条款）。认为这可以通过隐藏表单直到它被调用来完成。

还可以选择使用Modal，但我更喜欢在这个特定问题上将它全部放在一页上。

UPDATE 即使@Mat的建议适用于jsFiddle，仍然无法显示表单。上传文件，希望有人能发现错误。

<!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">&times;</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>

Answer 1

更新：看看这个小提琴http://jsfiddle.net/blocknotes/Luh1w87d/

修改您的选择：

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

在你的模态中你放了3个形式，如：

<form id="form1">...</form>
<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');
    }
});

Answer 2

这是一个很小的jsFiddle，可以解决您的问题。

<强> HTML

<select class="form-control input-small" id="form-controller">
  <option value="" selected disabled>Choose form</option>
  <option value="Form1">Form1</option>
  <option value="Form2">Form2</option>
  <option value="Form3">Form3</option>
</select>
<form id="Form1"><input type="text" value="Form1"/></form>
<form id="Form2"><input type="text" value="Form2"/></form>
<form id="Form3"><input type="text" value="Form3"/></form>

<强> CSS

form{
    display:none;
}

<强>的jQuery

$('#form-controller').change(function(){
    $('form').hide();
    $('form#'+$(this).val()).show();
});

您还可以通过将$(this).val()更改为$("#form-controller option:selected").text()

来选择表单中的选项文字而不是值

根据select的输入打开表单

2 个答案: