jQuery Mobile Horizontal Select Box - javascript

I have been struggling with getting this to work properly. I am trying to get the Horizontally grouped select inputs to work, on my mobile site from this page:
http://jquerymobile.com/demos/1.0/docs/forms/selects/
Right now my select boxes look like this:
But when I view the example it looks like this:
My HTML looks like this:
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
And my include scripts look like this:
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
I've tried copying and pasting the example exactly, and I still get the vertical and not horizontal, what am I doing wrong here?

Ok. So playing around with it some more and I got the select options working as you want it. These were the changes I had:
<meta name="viewport" content="width=device-width, initial-scale=0.9">
Keep in mind that the initial-scale value will change as per the width of your page and design.
Then I changed the select options as follows:
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month" data-mini="true">
<option>Month</option>
<option value="jan">January</option>
<!-- etc. -->
</select>
<select name="select-choice-day" id="select-choice-day" data-mini="true">
<option>Day</option>
<option value="1">1</option>
<!-- etc. -->
</select>
<select name="select-choice-year" id="select-choice-year" data-mini="true">
<option>Year</option>
<option value="2011">2011</option>
<!-- etc. -->
</select>
</div>
</div>
For some strange reason adding the legend tag inside the controlgroup wrapper breaks the design. Don't know if this is a bug or not. If you want a title for the dropdowns then you can do the following:
<div data-role="controlgroup" data-type="horizontal">
<div style="font-weight: bold;">Date of Birth</div>
These changes worked for me on my iPhone4, HTC One, and iPad (there is a whole lot more real estate on the iPad, so it was always going to work. But tested it there anyway).

Related

Select2 dropdown- scrollbar isn't available

I am using Select2 for all my dropdown inputs, and applied the minimumResultsForSearch for 10 entries.
The list is of course scrollable, However, it doesn't seem to show any scrollbar (arrows) which may be misleading (some might think the items are just cut off).
I couldn't find any information regarding a scrollbar in the documentation.
Anybody has an idea how to add one?
With the basic of select2 there is no issue with the scroll-bar.
The issue will be somewhere in your CSS codding. You need to provide code to make use able to search for your issue.
Basic Select2 Example (first: no search field and second: search field)
$('#first').select2({
minimumResultsForSearch: 10
});
$('#second').select2({
minimumResultsForSearch: 10
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<div style="padding: 50px;">
<div> 6 options available > No search bar (scroll works)</div>
<select id="first" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
</select>
<div style="padding-top: 25px;"> 11 options available > search bar available(scroll works)</div>
<select id="second" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
<option value="SP">Spain</option>
<option value="IT">Italy</option>
<option value="CH">China</option>
<option value="RU">Rusia</option>
<option value="LUX">Luxembourg</option>
</select>
</div>

dynamic drop down menu for labels

I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.
in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here

how to link category <option> tags

I want to link categories to their own pages. so I mean when I click to 'Hotels' it should open the page which is Category/Hotels
this is the current code
<select name="category">
<option value="">Any Category</option>
<option value="clubs">Clubs</option></a>
<option value="hotels">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>
lets say I want to link like that
<option value="www.website.com/event_cat/clubs/> Clubs </option>
<option value="www.website.com/event_cat/hotels/> Hotels </option>
.. and so on
but when I do, its directing to this page:
www.website.com/events/?time=&category=%2Fevent_cat%2Fclubs%2F&location=
JSfiddle Demo
<html>
<body>
<form name="blah_blah">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select Site</option>
<option value="http://www.yahoo.com">Yahoo!!!</option>
<option value="http://www.gmail.com">Gmail</option>
<option value="http://www.google.co.in">Google</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>
You just have to use full domain path with http or https(if its a secure server)
<option value="http://www.website.com/event_cat/clubs/> Clubs </option>
<option value="http://www.website.com/event_cat/hotels/> Hotels </option>
Since you have the first option already selected, in the first option, keep the value empty and add the onchange, as per the code below:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Any Category</option>
<option value="www.website.com/event_cat/clubs/">Clubs</option>
<option value="www.website.com/event_cat/hotels/">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>

select2 bootstrap sizing issue

I am trying to use a multiple select2 select form in my html with bootstrap. But I'm having issue with sizing, the select2 box is not working with the grid, and it also gurbles the size of next item. The html
<div class="select2-container col-md-11">
<select class="form-control s2" id="complaint" multiple="multiple" name=
"complaint[]">
<option value="bad_breath">
Bad Breath
</option>
<option value="bleeding_gum">
Bleeding Gum
</option>
<option value="swollen_gum">
Swollen Gum
</option>
<option value="gum_pain">
Gum Pain
</option>
<option value="loose_teeth">
Loose Teeth
</option>
<option value="sensitive_teeth">
Sensitive Teeth
</option>
<option value="darkened_teeth">
Darkened Teeth
</option>
<option value="damaged_teeth">
Damaged Teeth
</option>
</select>
</div>
The JS
<script type="text/javascript">
$(".s2").select2({
closeOnSelect: false
});
$(document).ready(function() {});
Full code here http://www.codeply.com/go/Ly1UHW2HT2
First Add in your select box : <select data-width="100%"></select>
Add This JS and CSS in you header :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
to fix the layout (widths not correct) you need to wrap the contents in a form-group:
<div class="form-group">
<label class="col-md-1 control-label" for="select">Label</label>
<div class="select2-container col-md-11">
<select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
</select>
</div>
</div>
Re the JS, I think there is an issue with codeply as copying the html and js and referencing the scripts and links directly in codepen works. See here for an example.

Trying to have 2 drop down comboboxes that have the same function

How can I have 2 drop down combo boxes on the same page?
here is what I have now:
<div class="ui-widget" >
<p> <label>test: </label></p>
<select id="combobox">
<option value="">Select one...</option>
<option value="first">first</option>
<option value=">second">second</option>
</select>
<button style = "margin-left:35px;"type="button" onclick="f1()">Go!</button>
</div>
...
<div class="ui-widget">
<select id="combobox">
<option value="">Select one...</option>
<option value="test">test</option>
<option value="test2">test2</option>
</select>
</div>
I am pretty sure I am not able to have 2 of the same id's like I do. Right now the first one works but the second doesnt. How can I fix this?
Im using this dropdown http://jqueryui.com/autocomplete/#combobox
Using the same ID for 2 different elements is not valid.
If you're calling .combobox() on the two, simply use classes instead:
<select id="combobox1" class="combo"></select>
<select id="combobox2" class="combo"></select>
And then do $('.combo').combobox();.

Categories