I have found a full screen selextbox method for mobile phones.
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.
$(document).ready(function(){
$('.btn-mobileSelect-gen').attr('type', 'button');
});
I forked your fiddle here - working demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.