This is getting a bit crazy.
I have been trying the code for hours now and no luck:
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
From:
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-selects.html
When I test it on my mobile there is no dropdown ... actually, nothing hapens at all.
I'm I forgetting something?
If you look at the source of the web page you can see it's in a form tag:
<form action="#" method="get">
So Adding this between the form tags would get the desired results: Live Example Link
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</form>
Another problem it could be:
Try adding this tag to the dropdown: Live Example Link
data-native-menu="false"
I had the same problem and the decision is in the connected libraries
I include in head tag this css
code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css
and this
code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js
and all works well!
looks like a direct copy paste from the link did you include jquery and jquery mobile ?
I had this issue recently, and the accepted answer did not fix it for me. In the process of creating a question on it, I figured out the solution:
When using both jQuery UI and jQuery Mobile, UI must come before Mobile in your list of scripts.
I had this:
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Which resulted in UI having precedence over my form elements, especially noticeable in select menus. I switched these statements, and the menus were enhanced by Mobile properly.
Related
I'm trying to fix a bug on a Worpress theme using jquery-Chosen multi select tool. Here is the page in which the form is: http://mitramimoveis.com.br/temp/ . The placeholder works well on desktops and is input through the theme's interface:
Theme's interface
However, on mobile devices, the multi select fields only show "0 selected", on Android and "0 Items", on iPhone. The placeholder I put doesn't show up at all. I already tried adding a blank Option as first, using custom jQuery through the "Custom CSS and JS" Wordpress plugin, but it didn't work - all the answers I found regarding this issue, addressed this as a solution.
The html code for the forms:
<!-- Row -->
<div class="row with-forms">
<div class="search-form-_property_type col-md-3 custom-tipo-imovel">
<select multiple name="_property_type[]" name="_property_type" id="_property_type" data-placeholder="Tipo de imóvel" class="chosen-select">
<option value="">Tipo de imóvel</option>
<option value="apartamento">Apartamento</option>
<option value="casa">Casa</option>
<option value="sobrado">Sobrado</option>
</select>
</div>
<div class="search-form-_cidade col-md-3 custom-tipo-imovel">
<select multiple name="_cidade[]" name="_cidade" id="_cidade" data-placeholder="Cidade" class="chosen-select">
<option value="">Cidade</option>
<option value="Curitiba">Curitiba</option>
<option value="Campo Largo">Campo Largo</option>
</select>
</div>
<div class="search-form-tax-region col-md-3 custom-tipo-imovel">
<select multiple name="tax-region[]" data-placeholder="Bairro" class="chosen-select">
<option value="">Bairro</option>
<option value="bigorrilho">Bigorrilho</option>
<option value="cabral">Cabral</option>
<option value="centro">Centro</option>
<option value="portao">Portão</option>
</select>
</div>
<div class="col-md-3 ">
<button class="button fullwidth">Buscar</button>
</div>
</div>
How can I solve this? I need the users to know what are the options about on each field and the theme doesn't offer a label (which I also don't want to use). Thanks.
*I noted that the first option is the same as the placeholder and has an empty value.
Hope this is welcomed feedback but placeholder text isn't ADA compliant. Here are some resources that can help you take a different approach if you so choose:
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research
Example:
https://material-ui.com/components/selects/
<div class="box">
<select class="ignore">
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
I'm trying to create a country phone code drop-down with customization.
Here I'm trying to use jquery-nice-select plugin. What I want to know is, is it possible to create country phone code selector using jquery-nice-select plugin? I didn't get a way for that, so can you guys can help me? I have attached my HTML code above.
https://hernansartorio.com/jquery-nice-select/
I have two jquery plugin
Image Picker link and select2 link
when i use the both of this plugin one of them is cannot run
here is my code
jquery code
$(".select2").select2();
$(".imagepicker").imagepicker();
select menu for select2
<select class="select2">
<option value="1">One</option>
<option value="2">Two</option>
</select>
select menu for imagepicker
<select class="imagepicker">
<option data-img-src="img/01.png" value="1"> Page 1 </option>
<option data-img-src="img/02.png" value="2"> Page 2 </option>
<option data-img-src="img/03.png" value="3"> Page 3 </option>
</select>
I don't know what is happening, but when I use the both of this plugin one of them is not working, maybe because in same select tag?
I am sorry my english is bad
The thumb rule is that your last plugin loaded would overrun the previous segment.
i got a html-dummy (http://www.gisa.de/formular_test/anmeldeformular.html) from another company and now i am trying to create a web-form (http://www.gisa.de/2359.html) based on that dummy.
i am using the same scripts, the basic structure is the same as the dummy, i've compared the sh** out of the code and found nothing. I found one thing with firebug: the site with the non-working select-block won't call the function custom_select from the script.js file - but why???
i hope someone will find a solution, or something that i've just overlooked
i made 2 jsfiddle out of it:
http://fiddle.jshell.net/WbXsv/1/
http://fiddle.jshell.net/95Q8P/1/
The code is not the same. On your page, you're missing two spans in your div select.
Your page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</div>
Their page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
<span class="select-icon"></span>
<span class="select-box">bitte auswählen</span>
</div>
Adding those solved the issue.
You have:
.js select {
opacity: 0;
}
in gisa.css and custom_select function is adding custom html in place of hidden select.
Don't have any programming experience and only basic html/css.
I'm trying to create a javascript menu (open to suggestions if there is a easier way?) that will show/hide based on the option selected in the first menu?
I have the following ...
<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="#" selected>Quick Links</option>
<option value="menu1">menu1</option>
<option value="menu2">menu2</option>
<option value="menu3">menu3</option>
</select>
<select name="menu1" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt1-1.html">opt1</option>
<option value="http://www.site.com/opt1-2.html">opt2</option>
<option value="http://www.site.com/opt1-3.html">opt3</option>
</select>
<select name="menu2" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt2-1.html">opt1</option>
<option value="http://www.site.com/opt2-2.html">opt2</option>
<option value="http://www.site.com/opt2-3.html">opt3</option>
</select>
<select name="menu3" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://www.site.com/opt3-1.html">opt1</option>
<option value="http://www.site.com/opt3-2.html">opt2</option>
<option value="http://www.site.com/opt3-3.html">opt3</option>
</select>
</form>
Can someone explain how i can ....
-show/hide menus 1-2 based on which option is selected in 'menu'???
Thanks inadvance!
Consider using a ready-made dropdown menu as a solution. Some links:
38 jQuery And CSS Drop Down Multi Level Menu Solutions: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
22 Best jQuery Dropdown Menus: http://slodive.com/web-development/best-jquery-dropdown-menus/
Alternatively, you could write your own solutions, say, with jQuery. For more information on this, see for example tutorial for a "Simple jQuery Dropdown Menu".