支持手机端的银行卡选择 非select选择
XML/HTML Code
- <div class="container-fluid" id="con">
- <div class="row bg-fff par-top-40 pad-right-15" id="bank_show1" >
- <table class="table">
- <tr>
- <td class="form_td border-none td_bot" >姓名</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入姓名"/></td>
- </tr>
- <tr>
- <td class="form_td border-none td_bot">身份证号</td><td class="border-none td_bot"><input type="text" class="form-control" placeholder="请输入身份证号"/></td>
- </tr>
- <tr>
- <td class="form_td border-none td_bot">选择银行</td>
- <td class="border-none td_bot">
- <div class="position-rel">
- <div class="position-rel">
- <input type="text" id="chose_input" class="form-control" placeholder="--储蓄卡--"/>
- <div class="bank_xljt"><img class="jt_xz" width="20" src="images/jtx.png" alt=""/></div>
- <div id="chose_bank" class="bank_xljt1"></div>
- </div>
- <div class="bank_xl" style="display: none">
- <ul>
- <li class="hotBank-list">
- <a href="javascript:" class="hotBank-list-ico " title="中国农业银行">
- <img src="images/zs1.png" width="150" alt=""/>
- </a>
- </li>
- <li class="hotBank-list">
- <a href="javascript:" class="hotBank-list-ico " title="中国建设银行">
- <img src="images/zs2.png" width="150" alt=""/>
- </a>
- </li>
- <li class="hotBank-list">
- <a href="javascript:" class="hotBank-list-ico " title="中国工商银行">
- <img src="images/zs3.png" width="150" alt=""/>
- </a>
- </li>
- <li class="hotBank-list">
- <a href="javascript:" class="hotBank-list-ico " title="中国银行">
- <img src="images/zs4.png" width="150" alt=""/>
- </a>
- </li>
- </ul>
- </div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </div>
JavaScript Code
- <script>
- $(function(){
- // 下拉银行卡
- $(".hotBank-list-ico").bind('click',function(){
- $('#chose_input').val($(this).attr('title'));
- $('.bank_xl').hide();
- $("#chose_bank").parent('div').find('img').addClass('jt_xz');
- });
- $("#chose_bank").click(function(){
- $('.bank_xl').show();
- $("#chose_bank").parent('div').find('img').removeClass('jt_xz');
- });
- // 下拉银行卡
- })
- </script>
原文地址:http://www.freejs.net/article_jquerywenzi_617.html