简体   繁体   English

选择框全屏jQuery引导程序

[英]Select box fullscreen jquery bootstrap

I have found a full screen selextbox method for mobile phones. 我发现了用于手机的全屏selextbox方法。

http://craftpip.github.io/bootstrap-fullscreen-select/ http://craftpip.github.io/bootstrap-fullscreen-select/

But when i'm add a form action on the select box and click on a select option the popups open and before i choose some value it redirects directly to the form action. 但是,当我在选择框上添加一个表单动作并单击选择选项时,弹出窗口会打开,在我选择一些值之前,它会直接重定向到表单动作。

Any idea how i can solve this? 知道我该如何解决吗?

<link href="http://www.jqueryscript.net/demo/Mobile-First-Fullscreen-Select-Replacement-with-jQuery-Bootstrap/css/bootstrap-fullscreen-select.css" rel="stylesheet" type="text/css">
<form action="index.html">
    <select class="form-control example-1" >
    <option value="JavaScript">JavaScript</option>
    <option value="C++">C++</option>
    <option value="Swift">Swift</option>
    <option value="Ruby">Ruby</option>
    <option value="Python">Python</option>
</select>

  </form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Mobile-First-Fullscreen-Select-Replacement-with-jQuery-Bootstrap/js/bootstrap-fullscreen-select.js"></script>
<script>
$('.example-1').mobileSelect();
$('.example-2').mobileSelect({theme: 'holo',style: 'btn-danger'});
$('.example-3').mobileSelect({theme: 'mac', animation: 'zoom'});
</script>

Interesting, I have never used this plugin, so I had to dig around the source a bit. 有趣的是,我从未使用过此插件,因此我不得不对源代码进行一些挖掘。 Anyways, your native selects are being converted into buttons. 无论如何,您的本机选择都将转换为按钮。 Buttons in forms will submit. 表单中的按钮将提交。 Add this snippet to your own js file. 将此代码段添加到您自己的js文件中。

$(document).ready(function(){
    $('.btn-mobileSelect-gen').attr('type', 'button');
});

I forked your fiddle here - working demo 我在这里分叉了你的小提琴- 工作演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM