"Bootstrap Banking Select Options"
Bootstrap 3.3.0 Snippet by RajeshPatadiya

<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> <!--ALL BANK--> <tr class="paymentmethod bankchooser"> <td> Choose Bank <span class="req">*</span> </td> <td> <select class="selectpicker form-control" data-live-search="true" style="display:none" id="bankparent"> <option data-tokens="" value="">Select A Bank</option> <option data-tokens="dbbl" value="dbbloptions">DBBL</option> <option data-tokens="brac" value="bracoptions">BRAC</option> <option data-tokens="other" value="otheroptions">Other</option> </select> </td> </tr> <!--DBBL--> <tr class="paymentmethod bankmethod dbbloptions"> <td> Account Holder <span class="req">*</span> </td> <td> <input type="text" name="dbbl_holder" id="dbbl_holder" class="form-control" placeholder="Account Holder" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod dbbloptions"> <td> AC No <span class="req">*</span> </td> <td> <input type="text" name="dbbl_no" id="dbbl_no" class="form-control" placeholder="DBBL AC No" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod dbbloptions"> <td> Branch Name <span class="req">*</span> </td> <td> <input type="text" name="dbbl_branch" id="dbbl_branch" class="form-control" placeholder="Branch Name" aria-describedby="basic-addon1"> </td> </tr> <!--/DBBL--> <!--BRAC--> <tr class="paymentmethod bankmethod bracoptions"> <td> Account Holder <span class="req">*</span> </td> <td> <input type="text" name="brack_holder" id="brac_holder" class="form-control" placeholder="Account Holder" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod bracoptions"> <td> AC No <span class="req">*</span> </td> <td> <input type="text" name="brac_no" id="brac_no" class="form-control" placeholder="Brac AC No" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod bracoptions"> <td> Branch Name <span class="req">*</span> </td> <td> <input type="text" name="brac_branch" id="brac_branch" class="form-control" placeholder="Branch Name" aria-describedby="basic-addon1"> </td> </tr> <!--/BRAC--> <!--Other--> <tr class="paymentmethod bankmethod otheroptions"> <td> Bank Name <span class="req">*</span> </td> <td> <input type="text" name="o_bank_name" id="o_bank_name" class="form-control" placeholder="Bank Name" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod otheroptions"> <td> Account Holder <span class="req">*</span> </td> <td> <input type="text" name="o_account_holder" id="o_account_holder" class="form-control" placeholder="Account Holder" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod otheroptions"> <td> AC No <span class="req">*</span> </td> <td> <input type="text" name="o_account_no" id="o_account_no" class="form-control" placeholder="AC No" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod otheroptions"> <td> Branch Name <span class="req">*</span> </td> <td> <input type="text" name="o_branch_name" id="o_branch_name" class="form-control" placeholder="Branch Name" aria-describedby="basic-addon1"> </td> </tr> <tr class="paymentmethod bankmethod otheroptions"> <td> Routing No <span class="req">*</span> </td> <td> <input type="text" name="o_rotuing_no" id="o_rotuing_no" class="form-control" placeholder="Routing No" aria-describedby="basic-addon1"> </td> </tr> <!--/Other--> <!--/ALL BANK--> <!--ALL Mobile--> <!--Bkash--> <tr class="paymentmethod bkashchooser"> <td> bKash Type <span class="req">*</span> </td> <td> <select class="selectpicker form-control" data-live-search="true" id="bkash_type"> <option data-tokens="agent" value="agent">Agent</option> <option data-tokens="personal" value="personal">Personal</option> </select> </td> </tr> <tr class="paymentmethod bkashchooser"> <td> Bkash No <span class="req">*</span> </td> <td> <input type="text" name="bkash_no" id="bkash_no" class="form-control" placeholder="Bkash No" aria-describedby="basic-addon1"> </td> </tr> <!--/Bkash--> <!--Rocket--> <tr class="paymentmethod rocketchooser"> <td> Rocekt Type <span class="req">*</span> </td> <td> <select id="rocket_type" class="selectpicker form-control" data-live-search="true"> <option data-tokens="agent" value="agent">Agent</option> <option data-tokens="personal" value="personal">Personal</option> </select> </td> </tr> <tr class="paymentmethod rocketchooser"> <td> Rocket No <span class="req">*</span> </td> <td> <input type="text" name="rocket_no" id="rocket_no" class="form-control" placeholder="Rocekt No" aria-describedby="basic-addon1"> </td> </tr> <!--/Rocket--> <!--/ALL Mobile--> </table> </div> </div> <!--/.Panel--> </div> </div> <div class="row"> <div class="col-md-12"> <input type="submit" class="btn btn-info pull-right" id="update" value="Submit" style="margin-top:20px;"> </div> </div> </div> </body> </html>
.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; flex:1 1 auto; } .card-footer,.card-header { padding:.75rem 1.25rem; background:#; color:#000; } .paymentmethod,.bankmethod { display:none; } td { text-align: left; }
$(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){ console.log(data) } }); }//for brac bank if (bankparent=='bracoptions') { var paymentmethod = 'bank'; var brac_holder = $('#brac_holder').val(); var brac_no = $('#brac_no').val(); var brac_branch = $('#brac_branch').val(); $.ajax({ type: "POST", url: 'acc', data: { paymentmethod : paymentmethod, bank_name:"brac", brac_holder : brac_holder, brac_no : brac_no, brac_branch:brac_branch, "_token": "{{ csrf_token() }}" }, success: function(data){ console.log(data) } }); }//for other banks if (bankparent=='otheroptions') { var paymentmethod = 'bank'; var other_bank_name = $('#o_bank_name').val(); var other_ac_holder = $('#o_account_holder').val(); var other_ac_no = $('#o_account_no').val(); var other_branch_name = $('#o_branch_name').val(); var other_routing_no = $('#o_rotuing_no').val(); $.ajax({ type: "POST", url: 'acc', data: { paymentmethod : paymentmethod, bank_name:'otherbank', other_bank_name:other_bank_name, bank_account_holder : other_ac_holder, bank_account_no : other_ac_no, branch_name:other_branch_name, routing_no:other_routing_no, "_token": "{{ csrf_token() }}" }, success: function(data){ console.log(data) } }); } }//for bkash if (paymentmethodparent=='bkashchooser') { var paymentmethod = 'bkash' var bkash_type = $('#bkash_type').val(); var bkash_no = $('#bkash_no').val(); $.ajax({ type: "POST", url: 'acc', data: { paymentmethod : paymentmethod, bkash_type : bkash_type, bkash_no : bkash_no, "_token": "{{ csrf_token() }}" }, success: function(data){ console.log(data) } }); }//for rocket if (paymentmethodparent=='rocketchooser') { var paymentmethod = 'rocket'; var rocket_type = $('#rocket_type').val(); var rocket_no = $('#rocket_no').val(); $.ajax({ type: "POST", url: 'acc', data: { paymentmethod : paymentmethod, rocket_type : rocket_type, rocket_no : rocket_no, "_token": "{{ csrf_token() }}" }, success: function(data){ console.log(data) } }); } });

Related: See More


Questions / Comments: