We Keep Coding

jQuery Validation show error message for only one specific select field (bootstrap-select)

I am using bootstrap-select plugin along with jQuery Validation plug in and am adding some custom error states to the select dropdowns (red border). I almost have everything working as I would like. The one issue I cannot seem to figure out is how to display error text along with the custom error border I created on ONE of the input fields. I added an addMethod to the form validation which is checking for a min age of 18 which is working but the Error message needs to show along with the custom red border I have created when they select an age that does not meet the requirements of the addMethod (must be 18)
https://codepen.io/mDDDD/pen/qBZWpbj
html:
<div class="custom-select-box">
<select class="selectpicker select-input multiple select-month" name="dobMonth"
id="selectMonth">
<option selected="true" disabled="disabled">Month</option>
<option value="January">January</option>
<option value="Febuary">Febuary</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>
<div class="dropdown-caret-div">
<i class="fal fa-angle-up"></i>
<i class="fal fa-angle-down"></i>
</div>
</div>
<div class="custom-select-box">
<select class="selectpicker select-input multiple select-day" name="dobDay" id="selectDay">
<option selected="true" disabled="disabled">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<div class="dropdown-caret-div">
<i class="fal fa-angle-up"></i>
<i class="fal fa-angle-down"></i>
</div>
</div>
<div class="custom-select-box">
<select class="selectpicker select-input multiple select-year" name="dobYear" id="selectYear">
<option selected="true" disabled="disabled">Year</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
</select>
<div class="dropdown-caret-div">
<i class="fal fa-angle-up"></i>
<i class="fal fa-angle-down"></i>
</div>
</div>
</div>
<!-- select box row-->
jQuery:
$userInfoForm.validate({
debug: true,
ignore: [],
rules: {
userIs: {
required: true,
},
dobMonth: {
required: true,
},
dobDay: {
required: true,
},
dobYear: {
minAge18: true,
minAge10: false,
required: true,
},
},
messages: {
userIs: 'This field is required.',
dobMonth: 'Date of birth is required.',
dobDay: 'Month is required.',
dobYear: {
minAge18:
'We're sorry but you need to be at least 18 years old to register.',
required: 'Year is required.',
},
},
errorPlacement: function (error, element) {
if ($(element).is('select')) {
$(element).parent('div').addClass('dropdown-has-error');
} else if ($(element).attr('name') === 'userIs') {
$(element).siblings('label.select-role').addClass('radio-has-error');
} else {
element.attr('placeholder', error.text());
}
},
success: function (label, element) {
$(element).parent('div').removeClass('dropdown-has-error');
$(element).siblings('label.select-role').removeClass('radio-has-error');
}
$('.selectpicker').on('change', function () {
$(this).valid();
if ($(this).hasClass('error')) {
$(this).parent('div').addClass('dropdown-has-error');
} else {
$(this).parent('div').removeClass('dropdown-has-error');
}
});
//add validator method - user must be at least 18 years of age
$.validator.addMethod(
'minAge18',
function (value, element) {
var yearToday = new Date().getFullYear();
value = parseInt(value, 10);
return yearToday - value >= 18;
},
'Update minAge18 error message in validator'
);
css:
.error {
color: red;
}
.radio-has-error::before {
border: 2px solid red;
}
.dropdown-has-error {
border: 2px solid red !important;
}

You don't have error messages because you've eliminated them from the errorPlacement function.
errorPlacement: function (error, element) {
if ($(element).is('select')) {
$(element).parent('div').addClass('dropdown-has-error');
} else if ($(element).attr('name') === 'userIs') {
$(element).siblings('label.select-role').addClass('radio-has-error');
} else {
element.attr('placeholder', error.text());
}
},
Any select is going to hit the first conditional, which only adds a class.
if ($(element).is('select')) {
$(element).parent('div').addClass('dropdown-has-error');
The default errorPlacement function contains something like the following, which you've neglected to include anywhere...
error.insertAfter(element);
You have a element.attr('placeholder', error.text()), which will simply change the placeholder attribute into the error message, but only when the other conditionals fail. I don't think using the placeholder for error messages is proper GUI since that's not what a placeholder is supposed to be... and AFAIK, there is no placeholder on select elements.
So if you're missing messages, it's because you've overwritten the default errorPlacement without inserting the error object anywhere into your DOM.
That being said, you should not be using errorPlacement for adding classes. You should only use it for placing the message into your layout. Once placed, the plugin toggles the message. If you add classes here, then you would need to remove them somehow, which is what you're doing with the success callback. However, this all just isn't quite right.
errorPlacement is for placing the message into the layout.
success is for leveraging the message itself when the element is valid, such as placing a green checkmark.
If you want to add and remove classes, then use the highlight and unhighlight callback functions as that's exactly what these are here to do.

How to get age based on month/day/year dropdown in FireFox

I am trying to get the age of users based on the month date and year field they enter in the dropdown. This is working in Chrome and other browsers but in Firefox I get an Invalid Date Error:
jQuery('#cons_birth_date_YEAR,#cons_birth_date_MONTH,#cons_birth_date_DAY').on('change',function(){
var selectedYear=$('#cons_birth_date_YEAR').find('option:selected').val();
var selectedDay=$('#cons_birth_date_DAY').find('option:selected').val();
var selectedMonth=$('#cons_birth_date_MONTH').find('option:selected').val();
if(selectedYear!=0 && selectedMonth!=0 && selectedDay!=0)
{
var today = new Date();
var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear);
console.log(dob);
var age = new Date(today - dob).getFullYear() -1970;
$("#age").val(age);
}
if (age < 13) {
alert('under 13');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>
<span class="aural-only cons_dob"></span>
<span class="input-label survey-question-label cons_dob">Date of Birth:</span>
</legend>
<span class="input-container">
<span id="cons_birth_date_date" title="Date:">
<select name="cons_birth_date_MONTH" id="cons_birth_date_MONTH" title="Month">
<option value="0">Month
</option>
<option value="1" selected="selected">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="cons_birth_date_DAY" id="cons_birth_date_DAY" title="Day">
<option value="0">Day
</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="cons_birth_date_YEAR" id="cons_birth_date_YEAR" title="Year">
<option value="0">Year
</option>
<option value="1997" selected="selected">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</span>
</span>
</fieldset>
This script adds an alert if a user is under 13 years of age. This works in Chrome but in Firefox, the line below is returning the error: Invalid Date
var dob=new Date(selectedDay+"/"+selectedMonth+"/"+selectedYear);

Try with this:
var dateSTR = "2019-07-02";
var dob = new Date(dateSTR.replace(/-/g,"/"));
You can read this and check the crossbrowsing problems.

Pass data from 3 select's to one input

I've got three select fields (day, month, year). I need to pass their value automatically to one (at the hidden) input field (which will be transfered to database. The jquery code which i have wrote is bellow.
Unfortunatelly - it seems wrong/with error. How can I write it better to avoid such mistakes? currently data is not passed.Full code is here:
var dd_value = document.getElementById("dd_value");
var mm_value = document.getElementById("mm_value");
var yy_value = document.getElementById("yy_value");
(dd_value+mm_value+yy_value).onchange = function(){
var textbox = document.getElementById("bdaysummary");
textbox.value = dd_value;
};
.cc-selector input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}
.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.drinkcard-cc{
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:100px;height:70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}
/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>Pick one of two:</p>
<div class="cc-selector">
<input id="visa" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="mastercard" />
<label class="drinkcard-cc mastercard"for="mastercard"></label>
</div>
<hr />
<div>
<select id="dd_value">
<option>- Day -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="mm_value">
<option>- Month -</option>
<option value="0">Unknown</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">Nobember</option>
<option value="12">December</option>
</select>
<select id="yy_value">
<option>- Year -</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
<br />
<input name="bdaysummary" id="bdayummary" type="text" />
</div>
</form>

<script>
$(document).ready(function(){
$('#dd_value, #mm_value, #yy_value').change(function(){
dd_value = $('#dd_value').val();
mm_value = $('#mm_value').val();
yy_value = $('#yy_value').val();
result = dd_value+'-'+mm_value+'-'+yy_value;
$('#bdayummary').val(result);
});
})
</script>
Recommendation:
Use zero fill format for days and months numbers (for example 01 instead of 1) to prevent unwanted behaviors.
Notice:
As Hubert said too, you must think about a solution for the first options that don't have valid value. This code is focused only on gathering data from select inputs and putting them inside another input.

Here you go. check inline comments for detailed explanation.
DEMO
First I would like to add a class to your each select say .bd and write a change event to that class
$('.bd').on('change',function(){
var allSelect=true; //for validation purpose
$.each($('.bd'),function(){
var value=$(this).find('option:selected').text();//store the current value
if(value=='- Day -' || value=='- Month -' || value=='- Year -')
//if value selected is any of these value then set allSelect=false
allSelect=false
});
if(allSelect) //Proceed only if its true
{
var date=$('#dd_value option:selected').text(); //get date
var month=$("#mm_value option:selected").text(); //get month
var year=$("#yy_value option:selected").text(); //get year
var newDate=date +"-"+month+"-"+year; //combine it
$("#bdayummary").val(newDate); //display in textbox
}
});
Note : You can select date in any order but still validation happens
UPDATE
As per Hubert's comments I am updating this answer and DEMO too. Now this is taking val() and assigning the same.
DEMO UPDATED
$('.bd').on('change',function(){
var allSelect=true;
$.each($('.bd'),function(){
var value=$(this).find('option:selected').val();
if(value=='- Day -' || value=='- Month -' || value=='0' || value=='- Year -')
{
allSelect=false;
return false; //to break loop if any found
}
});
if(allSelect)
{
var date=$('#dd_value option:selected').val();
var month=$("#mm_value option:selected").val();
var year=$("#yy_value option:selected").val();
if(month<10)
month="0"+month;
var newDate=date +"-"+month+"-"+year;
$("#bdayummary").val(newDate);
}
});

Your problem lies in
(dd_value+mm_value+yy_value).onchange = function() {...}
The "+" operator on elements coerces the elements to strings and concatenates them. So basically you're assigning the "onchange" property to a string, not the the elements. Assign them one by one or use jQuery like this:
$([dd_value, mm_value, yy_value]).change(function() {...})

Try something like that (jQuery):
$(dd_value, mm_value, yy_value).on('change', function(){
....
});

$("#yy_value,#dd_value,#mm_value").change(function() {
var dd_value = $("#dd_value").val();
var mm_value = $("#mm_value").val();
var yy_value = $("#yy_value").val();
alert(dd_value+"-"+mm_value+"-"+yy_value);
});
Try This Code This Will Work For You should include jquery for this
Edit
if(dd_value != '- Day -' && mm_value !='- Month -' && yy_value != '- Year -')
{
alert(dd_value+"-"+mm_value+"-"+yy_value);
}
To
alert(dd_value+"-"+mm_value+"-"+yy_value);
due to change function this will be evaluated only when all fields are change as
$("#yy_value,#dd_value,#mm_value").change(function() {}); so this will resolve this

This is basically Mohammad's answer extended by some value checks and zero-padding:
$(document).ready(function(){
$('#dd_value, #mm_value, #yy_value').change(function(){
var dd_value = $('#dd_value').val();
var mm_value = $('#mm_value').val();
var yy_value = $('#yy_value').val();
var result = "";
// check that the values are not undefined (missing value)
if ($.inArray("undefined", [ typeof dd_value, typeof mm_value, typeof yy_value ]) < 0)
{
// add padding zero
dd_value = dd_value.length === 1 ? "0"+dd_value : dd_value;
mm_value = mm_value.length === 1 ? "0"+mm_value : mm_value;
var result = dd_value+'-'+mm_value+'-'+yy_value;
}
$('#bdayummary').val(result);
});
})

Change text align of div from dropdown selection?

I have a few dropdown list to style the font of a div. However i cant seem to get the align to work. Please help!!
I have always found my answers on google and not had such a tough time getting round things. The align is really bugging me, that i cant find a solution.
<SCRIPT LANGUAGE="JavaScript">
function fontSize(size){
document.getElementById("lineOne").style.fontSize = size
}
function fontFamily(family) {
document.getElementById("lineOne").style.fontFamily = family
}
function fontStyle(style) {
document.getElementById("lineOne").style.fontStyle = style
}
function fontWeight(weight) {
document.getElementById("lineOne").style.fontWeight = weight
}
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function setColor() {
var color = document.getElementById("color").value;
document.getElementById("myDiv").style.color = color;
}
function alignl(ele){
document.getElementById("lineOne").style.align = ele
}
</SCRIPT>
And the body is aa such:
<body>
Size:
<select name=fontSizeChanger onchange="fontSize(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
Colour:
<select id="color" onclick="setColor();">
<option value="white">white</option>
<optionvalue="black"selected="selected">black</option>
<option value="red">red</option>
<option value="lightblue">light blue</option>
<option value="darkblue">dark blue</option>
<option value="lightgreen">light green</option>
<option value="darkgreen">dark green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
</select>
Family:
<select id="fontFamilyChanger" onchange="fontFamily(this.value)">
<option value="sans-serif" selected="selected">Sans Serif</option>
<option value="Impact">Impact</option>
<option value="times new roman">Times New Roman</option>
</select>
Style:
<select id="fontStyleChanger" onchange="fontStyle(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="italic">Italic</option>
<option value="oblique">Oblique</option>
</select>
Weight:
<select id="fontWeightChanger" onchange="fontWeight(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="bold">Bold</option>
</select>
Align:
<select id='s' name='s' onchange="alignl(this.value);">
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
<option value="top">top</option>
</select>
<form name="myForm">
<input name="myContent"></input>
<input type="button" value="Add content" onClick="addContent('lineOne', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<div id="myDiv">
<div id="lineOne"></div>
</div>
</body>

You can set the align in the same way you set the other styling properties, but the variable is named textAlign, not align.
function alignl(style) {
document.getElementById("lineOne").style.textAlign = style;
}

aligning HTML select elements on one line

i am working on a mobile app using HTML/CSS/JavaScript. I have two select option (drop down menu), one for number of dates and the other one for number of years. I want to be able to see these select options in one line, but no matter what I do, I get a drop down menu (number of dates) on one line and on the next line I get the drop down menu for number of years. Below you can see my codes
<div data-role="controlgroup" data-type = "horizontal" >
<label for="select-choice-1" >Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline = "true" style = "float: left">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select><br />
</div>
UPDATE:
I am testing these codes on Android browser using jQuery mobile framework.

Try floating both select tags left and adding a clear:both to the styling on the label. If you want the label above the two selects, just add a <br /> right below the label.
It would look something like
<label>Label Value</label>
<select>
<option>Etc...</option>
</select>
<select>
<option>Second select option...</option
</select>
and the CSS would be
label {
clear:both;
}
select {
float:left;
}
Also, as a heads-up, you end your second select tag before the first option tag, so they aren't included.
<select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>. You need to get rid of the / right before the ending of the tag.

It's the width on the ui-select class that's causing your issue, Setting the width to auto should correct the issue. jQM adds a ton of extra markup for the look and feel on the page to be consistent across multiple devices. If you view the page source in a browser such as Chrome or FireFox you can see the extra elements. In your case you needed to modify the ui-select class as it has a width of 60% as the default.
Live Example:
http://jsfiddle.net/phillpafford/trdYP/47/
JS:
$('#select-choice-1').parent().parent().css('width','auto');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" data-inline="true">
<label for="select-choice-1" data-inline="true">Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline="true">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="select-year" id="select-yaer" data-inline="true">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
</div>

If you make them both float left they will sit side by side, as long as their combined widths don't exceed the width of the container.