"Bootstrap Banking Select Options"
Bootstrap 3.3.0 Snippet by touhidbd

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<!--Panel-->
<div class="card text-center">
<div class="card-header default-color-dark white-text">
<h2 style="margin: 0;padding: 0;">Payment Information</h2>
</div>
<div class="card-block">
<table class="table">
<tr>
<td>
Payment Method <span class="req">*</span>
</td>
<td>
<select name="paymentmethodparent" id="paymentmethodparent" class="selectpicker form-control" data-live-search="true">
<option data-tokens="" value="">Select a Method</option>
<option data-tokens="bank" value="bankchooser">Bank</option>
<option data-tokens="bkash" value="bkashchooser">bKash</option>
<option data-tokens="rocket" value="rocketchooser">Rocket</option>
</select>
</td>
</tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.center {
margin:0;
padding:0;
background:#eceeef;
text-align:center;
}
.custom {
border:1px solid darkblue;
border-radius:10px;
margin:0 2%;
padding:0;
}
.req {
color:red;
font-weight:bold;
}
.card {
position:relative;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
background-color:#fff;
border:1px solid grey;
border-radius:5px !important;
box-shadow:2px 5px 8px #80808080;
margin-top:10px;
}
.card-block {
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function() {
$('#paymentmethodparent').change(function(){
$('.paymentmethod').hide();
$('.' + $(this).val()).show();
});
});
$(function() {
$('#bankparent').change(function(){
$('.bankmethod').hide();
$('.' + $(this).val()).show();
});
});
$('#update').click(function(event) {
var paymentmethodparent = $('#paymentmethodparent').val();
//for banks dbbl and rocket
if (paymentmethodparent=='bankchooser')
{
var bankparent = $('#bankparent').val();
//for dbbl bank
if (bankparent=='dbbloptions')
{
var paymentmethod = 'bank';
var dbbl_holder = $('#dbbl_holder').val();
var dbbl_no = $('#dbbl_no').val();
var dbbl_branch = $('#dbbl_branch').val();
$.ajax({
type: "POST",
url: 'acc',
data: {
paymentmethod : paymentmethod,
bank_name:"dbbl",
dbbl_holder : dbbl_holder,
dbbl_no : dbbl_no,
dbbl_branch:dbbl_branch,
"_token": "{{ csrf_token() }}"
},
success: function(data){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard Angular
Multi Select Tiled Layout
Button Dropdown Select
Select users

Questions / Comments: