We Keep Coding

not working event change on select for multiple classname

I have a page that multiple selects.
When the option of some of them is clicked (value=0), a text box should be opened in order for the user to write her description in it.
I want the same text box to be closed when the user clicks on any part of the page except the text box.
I want the text box to close automatically when the user goes to the before or next selector.
Event click not working on the options of select.
but this code not working.
If you have a suggestion for solving this problem, thank you for letting me know
Thank you in advance for your cooperation.
function changeFunc(){
var selectBox = document.querySelectorAll(".selectBox");
var selectedValue = selectBox.value;
var description = document.querySelectorAll('.description');
var i;
for (i = 0; i < selectBox.length; i++) {
selectBox[i].addEventListener('click', function(){
if(selectedValue == '0'){
selectBox[i].classList.add('active');
description[i].classList.add('show');
window.addEventListener("click", function(event){
var desText = document.querySelector('.description.show');
if (event.target !== desText) {
description.classList.remove('show');
}
});
}else{
selectBox[i].classList.remove('active');
description[i].classList.remove('show');
}
})
}
}
select{
width: 70%;
border:1px solid rgba(112, 112, 112, .5);
padding: 15px;
border-radius: 10px;
outline: none;
box-sizing: border-box;
}
select.active{
background: yellow;
color: white;
}
.description{
border: 2px solid red;
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 13.75%;
top: 85%;
z-index: 1;
display: none;
}
.line-form .description.show {
display: block;
}
<div>
<label for="example1">example1</label>
<select class="selectBox" name="whois" id="example1" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example1" cols="50" rows="3"> </textarea>
</div>
<div>
<label for="example2">example2</label>
<select class="selectBox" name="whois" id="example2" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example2" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example3">example3</label>
<select class="selectBox" name="whois" id="example3" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example3" cols="50" rows="3"></textarea>
</div>

I made changes to your code and added a "show" class to css.
When "YES" is selected from the options menu, which has the value = 0, "textarea" is displayed. When you click on another menu with options or anywhere else "textarea" is hidden.
When clicked, the script places on the parent packaging DIV element class ".selected". When clicking on an element the script looks for the closest element with this class. In this case it is the parent element ... if it does not have the active class "textarea" it will be hidden.
Step-by-step description:
Get all elements with class .selectBox
Add listner for "click" and "change" events on all elements with class .selectBox. This events call the function "changeFunc()".
Add listner on the window -> if user click anywhere the script search for closest element with class .selected (In this case this must be a parent element). If it is not, it means that it has been clicked outside the selected element and the function that removes the classes of the active element "removeClasses()" should be called.
The function "changeFunc()" First removes activity classes from all items by calling the function "removeClasses()". Then gets as an argument which is the clicked element. And checks if its value is equal to "0" and if it sets the activity classes.
The function "removeClasses()" removes activity classes from all items
var selectBox = document.querySelectorAll(".selectBox");
selectBox.forEach(el => {
el.addEventListener('change', function () {
changeFunc(this);
});
el.addEventListener('click', function () {
changeFunc(this);
});
});
window.addEventListener("click", function (event) {
var closest = event.target.closest('.selected');
if (!closest) {
removeClasses();
}
});
function changeFunc(x) {
removeClasses();
if (x.value === '0') {
x.classList.add('active');
x.classList.add('show');
x.parentNode.querySelector('.description').classList.add('show');
x.closest('div').classList.add('selected');
}
}
function removeClasses() {
selectBox.forEach(el => {
el.classList.remove('active');
el.classList.remove('show');
el.parentNode.querySelector('.description').classList.remove('show');
el.closest('div').classList.remove('selected');
});
}
select {
width: 70%;
border: 1px solid rgba(112, 112, 112, .5);
padding: 15px;
border-radius: 10px;
outline: none;
box-sizing: border-box;
}
select.active {
background: yellow;
color: white;
}
.description {
border: 2px solid red;
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 13.75%;
top: 85%;
z-index: 1;
display: none;
}
.show {
display: block;
}
.line-form .description.show {
display: block;
}
<div>
<label for="example1">example1</label>
<select class="selectBox" name="whois" id="example1" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example1" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example2">example2</label>
<select class="selectBox" name="whois" id="example2" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example2" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example3">example3</label>
<select class="selectBox" name="whois" id="example3" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example3" cols="50" rows="3"></textarea>
</div>

Your code looks fine. The problem is in
var selectedValue = selectBox.value;
selectBox is a collection of nodes, so You cannot get direct value from there. You need to loop through.
In your loop you need to get selected value using selectBox[i].value
And 1 more problem I can see, you are adding click event listener to the window, in the loop
It is not performant. You should pull this out from the loop

How to give checkbox in select tag using javascript function [duplicate]

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list.
Is there anyway possible to add a checkbox inside a Select Option menu?
NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.
Code:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
Explanation:
At first we create a select element that shows text "Select an option", and empty element that covers (overlaps) the select element (<div class="overSelect">). We do not want the user to click on the select element - it would show an empty options. To overlap the element with other element we use CSS position property with value relative | absolute.
To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).
We also create div that contains our checkboxes and style it using CSS. The above mentioned JavaScript function just changes <div id="checkboxes"> value of CSS display property from "none" to "block" and vice versa.
The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.
More information:
CSS positioning
How to overlay one div over another div
http://www.w3schools.com/css/css_positioning.asp
CSS display property
http://www.w3schools.com/cssref/pr_class_display.asp

The best plugin so far is Bootstrap Multiselect
EDIT: I wrote this a very long time ago. I would not recommend using jQuery anymore. You should rather learn a reactive framework like Vue.js, React, or Angular where you have plenty of modules to choose from. I'm sure you'll find what you need. I found this one for instance from a quick Google search.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head>
<body>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function(){
alert($('#chkveg').val());
});
});
</script>
</div>
</form>
</body>
</html>
Here's a demo:
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#chkveg').val());
});
});
.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}
<link href="https://unpkg.com/bootstrap#3.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap#3.3.2/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-multiselect#0.9.13/dist/js/bootstrap-multiselect.js"></script>
<link href="https://unpkg.com/bootstrap-multiselect#0.9.13/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
</div>
</form>

For a Pure CSS approach, you can use the :checked selector combined with the ::before selector to inline conditional content.
Just add the class select-checkbox to your select element and include the following CSS:
.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
You can use plain old unicode characters (with an escaped hex encoding) like these:
☐ Ballot Box - \2610
☑ Ballot Box With Check - \2611
Or if you want to spice things up, you can use these FontAwesome glyphs
.fa-square-o - \f096
.fa-check-square-o - \f046
Demo in jsFiddle & Stack Snippets
select {
width: 150px;
}
.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
.select-checkbox-fa option::before {
font-family: FontAwesome;
content: "\f096";
width: 1.3em;
display: inline-block;
margin-left: 2px;
}
.select-checkbox-fa option:checked::before {
content: "\f046";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<h3>Unicode</h3>
<select multiple="" class="form-control select-checkbox" size="5">
<option>Dog</option>
<option>Cat</option>
<option>Hippo</option>
<option>Dinosaur</option>
<option>Another Dog</option>
</select>
<h3>Font Awesome</h3>
<select multiple="" class="form-control select-checkbox-fa" size="5">
<option>Dog</option>
<option>Cat</option>
<option>Hippo</option>
<option>Dinosaur</option>
<option>Another Dog</option>
</select>
Note: Beware of IE compatibility issues however

Try multiple-select, especially multiple-items. Looks to be much clean and managed solution, with tons of examples. You can also view the source.
<div>
<div class="form-group row">
<label class="col-sm-2">
Basic Select
</label>
<div class="col-sm-10">
<select multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">
Group Select
</label>
<div class="col-sm-10">
<select multiple="multiple">
<optgroup label="Group 1">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="Group 2">
<option value="6">6</option>
<option value="7">7</option>
</optgroup>
<optgroup label="Group 3">
<option value="11">11</option>
<option value="12">12</option>
</optgroup>
</select>
</div>
</div>
</div>
<script>
$(function() {
$('select').multipleSelect({
multiple: true,
multipleWidth: 60
})
})
</script>

Alternate Vanilla JS version with click outside to hide checkboxes:
let expanded = false;
const multiSelect = document.querySelector('.multiselect');
multiSelect.addEventListener('click', function(e) {
const checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
e.stopPropagation();
}, true)
document.addEventListener('click', function(e){
if (expanded) {
checkboxes.style.display = "none";
expanded = false;
}
}, false)
I'm using addEventListener instead of onClick in order to take advantage of the capture/bubbling phase options along with stopPropagation().
You can read more about the capture/bubbling here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
The rest of the code matches vitfo's original answer (but no need for onclick() in the html).
A couple of people have requested this functionality sans jQuery.
Here's codepen example https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

I started from #vitfo answer but I want to have <option> inside <select> instead of checkbox inputs so i put together all the answers to make this, there is my code, I hope it will help someone.
$(".multiple_select").mousedown(function(e) {
if (e.target.tagName == "OPTION")
{
return; //don't close dropdown if i select option
}
$(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
});
$(".multiple_select").on('blur', function(e) {
$(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
});
$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
$(this).parent().change(); //trigger change event
});
$("#myFilter").on('change', function() {
var selected = $("#myFilter").val().toString(); //here I get all options and convert to string
var document_style = document.documentElement.style;
if(selected !== "")
document_style.setProperty('--text', "'Selected: "+selected+"'");
else
document_style.setProperty('--text', "'Select values'");
});
:root
{
--text: "Select values";
}
.multiple_select
{
height: 18px;
width: 90%;
overflow: hidden;
-webkit-appearance: menulist;
position: relative;
}
.multiple_select::before
{
content: var(--text);
display: block;
margin-left: 5px;
margin-bottom: 2px;
}
.multiple_select_active
{
overflow: visible !important;
}
.multiple_select option
{
display: none;
height: 18px;
background-color: white;
}
.multiple_select_active option
{
display: block;
}
.multiple_select option::before {
content: "\2610";
}
.multiple_select option:checked::before {
content: "\2611";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myFilter" class="multiple_select" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>

Use this code for checkbox list on option menu.
.dropdown-menu input {
margin-right: 10px;
}
<div class="btn-group">
<i class="fa fa-cogs"></i>
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="padding: 10px" id="myDiv">
<li><p><input type="checkbox" value="id1" > OA Number</p></li>
<li><p><input type="checkbox" value="id2" >Customer</p></li>
<li><p><input type="checkbox" value="id3" > OA Date</p></li>
<li><p><input type="checkbox" value="id4" >Product Code</p></li>
<li><p><input type="checkbox" value="id5" >Name</p></li>
<li><p><input type="checkbox" value="id6" >WI Number</p></li>
<li><p><input type="checkbox" value="id7" >WI QTY</p></li>
<li><p><input type="checkbox" value="id8" >Production QTY</p></li>
<li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>
<li><p><input type="checkbox" value="id10" > Production Date</p></li>
<button class="btn btn-info" onClick="showTable();">Go</button>
</ul>
</div>

You can use this library on git for this purpose
https://github.com/ehynds/jquery-ui-multiselect-widget
for initiating the selectbox use this
$("#selectBoxId").multiselect().multiselectfilter();
and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it
var js_arr = $.parseJSON(/*data from ajax*/);
$("#selectBoxId").val(js_arr);
$("#selectBoxId").multiselect("refresh");

You might be loading multiselect.js file before the option list updated with AJAX call so while execution of multiselect.js file there is empty option list is there to apply multiselect functionlaity. So first update the option list by AJAX call then initiate the multiselect call you will get the dropdown list with the dynamic option list.
Hope this will help you out.
Multiselect dropdown list and related js & css files
// This function should be called while loading page
var loadParentTaskList = function(){
$.ajax({
url: yoururl,
method: 'POST',
success: function(data){
// To add options list coming from AJAX call multiselect
for (var field in data) {
$('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
}
// To initiate the multiselect call
$("#parent_task").multiselect({
includeSelectAllOption: true
})
}
});
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>

You can try Bootstrap-select. It has a live search too!

If you want to create multiple select dropdowns in the same page:
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
Html:
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
Using Jquery:
function showCheckboxes(elethis) {
if($(elethis).next('#checkboxes').is(':hidden')){
$(elethis).next('#checkboxes').show();
$('.selectBox').not(elethis).next('#checkboxes').hide();
}else{
$(elethis).next('#checkboxes').hide();
$('.selectBox').not(elethis).next('#checkboxes').hide();
}
}

Only add class create div and add class form-control. iam use JSP,boostrap4. Ignore c:foreach.
<div class="multi-select form-control" style="height:107.292px;">
<div class="checkbox" id="checkbox-expedientes">
<c:forEach var="item" items="${postulantes}">
<label class="form-check-label">
<input id="options" class="postulantes" type="checkbox" value="1">Option 1</label>
</c:forEach>
</div>
</div>

How to hide and show label control JavaScript?

I have a project in which I have to set shipping address for online shopping. For paying, payment option are various credit cards for example: paypal, visa etc. so payment option is a drop down menu.
I have two labels namely "creditcard no" and "ccv". these should be hidden initially. Once payment option (from dropdown) is chosen, those two labels should appear.
$(document).ready(function() {
$('.nav-toggle').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Show');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});
});
.round-border {
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section class="round-border">
<div>
<button href="#collapse1" class="nav-toggle">credit card</button>
</div>
<div id="collapse1" style="display:none">
<label>
Payment Option
<select name="credit">
<option value="paypal">Paypal</option>
<option value="Visa">Visa</option>
<option value="Visa">Master Card</option>
<option value="Discover">Discover</option>
<option value="American Express">American Express</option>
<option value="Alipay">Alipay</option>
</select>
</label>
<br>Card Number:
<input type="text" size="24" maxlength="20" name="cc_number" onBlur="
cc_number_saved = this.value;
this.value = this.value.replace(/[^\d]/g, '');
if(!checkLuhn(this.value)) {
alert('Sorry, this is not a valid number - Please try again!');
this.value = '';
}
" onFocus="
// restore saved string
if(this.value != cc_number_saved) this.value = cc_number_saved;
">
<input type="submit" type="submit" name="submit" value="Ok">
<br>ccv:
<input type="text" name="ccv" required>
<br>
</div>
</section>
</body>

This code does what you ask.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
display:none;
}
</style>
<script>
function display() {
ccn.style.display='inherit';
ccv.style.display='inherit';
}
</script>
</head>
<body>
<form>
<select onchange='display();'>
<option selected>Please select...</option>
<option>Visa</option>
<option>MasterCard</option>
<option>Paypal</option>
</select>
<label id='ccn'>Credit Card Number</label>
<label id='ccv'>Credit Card Validation</label>
</form>
</body>
</html>
function display() {
ccn.style.display = 'inherit';
ccv.style.display = 'inherit';
}
label {
display: none;
}
<form>
<select onchange='display();'>
<option selected>Please select...</option>
<option>Visa</option>
<option>MasterCard</option>
<option>Paypal</option>
</select>
<label id='ccn'>Credit Card Number</label>
<label id='ccv'>Credit Card Validation</label>
</form>
The CSS for the label element initially doesn't display the labels. When the dropdown is changed the onChange event fires, which calls the display() function. This then makes the labels visible by changing the style of the labels via the DOM.
I didn't know about the script rule, but for conformities sake, I have altered the code.

Adding validation to an HTML select box

I want to make one simple validation check on my HTML form. I'd like it so that if the user chooses the 18 - 24, an error appears next to the drop down select: 'You must be 25+'.
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
I've tried adding both a class and ID to value 1. Then I tried something like:
function hidestuff(page){
document.getElementById(error).style.visibility="hidden";
}
function showstuff(error){
document.getElementById(error).style.visibility="visible";
}
Attempting to toggle show and hide with JavaScript. Hoping something like if on page ID hide this message, when error div toggled display. But this didn't work. I did add the corresponding CSS too. Any pointers on how to write this correctly?

Something like this can be achieved with a bit of jQuery:
Here's a JSFiddle
jQuery:
$(document).ready(function() {
$('#errorMsg').hide(); //ensure the error message is hidden
$('#element_3').on('change',function() {
// any option that has the class "error" will cause the error msg to be
// displayed (just in case you feel like adding a 0-17 option later)
// To target an element by ID, use $(this).find(":selected").attr('id') == 'error'
if ($(this).find(":selected").hasClass('error')) {
$('#errorMsg').show();
} else {
$('#errorMsg').hide();
}
});
});
and a bit of HTML:
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
</select>
<div id="errorMsg">You must be over 25</div>
and why not style it up with some CSS:
#errorMsg {
display: inline-block;
background-color: #fdd;
font: 12pt arial;
color: #f00;
padding: 2px 5px 2px 5px;
border: 1px solid #f00;
border-radius: 5px;
width: 200px;
}

I think what you must be doing is something like this
<select id="myselect" onchange="check();">
<option value="0">Select option</option>
<option value="1">op1</option>
<option value="2">op3</option>
</select>
<div id="error" style="display:none;">Error mesage</div>
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div>
<script>
function check() {
switch (parseInt($('#myselect').val())) {
case 0:
$('#error').show();
$('#page').hide();
break;
case 1:
$('#error').show();
$('#page').hide();
break;
case 2:
$('#error').hide();
$('#page').show();
break;
}
}
</script>
http://jsfiddle.net/SS3gc/4/

Enable a select box on choosing an option from previous select box

I have three select boxes on a page and I want to keep the second and third select box disabled until a choice has been made in the first one, and similarly keep the third one disabled until a choice has been made in the second select box. And I want to populate the second select box one the basis of the choice made in the first select box. for e.g. if samsung is the choice made in first box then I want the samsung models only to appear in second select box.
This is m HTML code.
<html>
<head>
<style>
select {
-webkit-appearance:none;
background-color:#58B14C;
background-position:initial initial;
background-repeat:initial initial;
border:0;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
color:#EEEEEE;
font-size:14px;
font-weight:bold;
margin-left:3px;
padding:2px 10px;
width:347px;
background:url("img/arrow.gif") no-repeat scroll 316px 6px black;
background-size: 16px;
}
select option{
background-color: black;
}
#mainselection { overflow:hidden; width:352px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 10px 10px 10px black;
background:grey;
float: left;
}
.stepsClass{
float:left;
}
body{
background-color: whitesmoke;
}
</style>
</head>
<body>
<form style="position:absolute;left: 15%;top: 25%;">
<div class="stepsClass"><input type="image" src="img/step1.png"></br><div id="mainselection">
<select id="Brand">
<option>Select your cellphone Brand</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
</div></div>
<div class="stepsClass"><input type="image" src="img/step2.png"></br> <div id="mainselection">
<select id="Model">
<option>Select your cellphone Model</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
</div></div>
<div class="stepsClass"><input type="image" src="img/step3.png"></br>
<div id="mainselection">
<select id="Carrier">
<option>Select your Carrier</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
</div></div>
</form>
</body>
</html>
I am sorry for not uploading the images I am assuming they are not of any relevance to this question. I am also adding jQuery tag because there are people who find it easier to write javascript in jQuery. Any help would be appreciated.

I have modified your HTML select options to have a value attribute.I believe this would allow you to populate the second select box one the basis of the choice made in the first select box.
<select id="Brand">
<option value = "">Select your cellphone Brand</option>
<option value = "BB">Blackberry</option>
<option value = "ios">I-phone</option>
<option value = "sam">Samsung</option>
<option value = "htc">HTC</option>
<option value = "nokia">Nokia</option>
<option value = "mot">Motorola</option>
</select>
<select id="Model" >
<option>Select Your Model No.</option>
</select>
Javascrpt
$(function(){
$("#Model").attr("disabled","true");
$("#Brand").change(function(){
if(this.value != ""){
$('#Model').removeAttr('disabled');
var brand = $("#Brand option:selected").text();
document.getElementById("Model").options.length = 1;
for(var i = 0; i < 10 ;i++){
var selectOption = document.createElement("OPTION");
selectOption.text = brand + " Model No." + i;
document.getElementById('Model').appendChild(selectOption);
}
$("#Model").selectmenu("refresh","true");
}
else{
$("#Model").attr("disabled","true");
$("#Model").val("");
$("#Model").selectmenu("refresh","true");
}
});
})
Hope it serves your purpose.

Disable required(2nd and 3rd) lists by adding disabled="disabled"
$(function(){
// The following will enable the 2nd drop down list when 1st one will be changed/selected.
$('#Brand').change(function(){
$('#Model').removeAttr('disabled');
});
// This block will enable the 3rd list when you change the 2nd list.
$('#Model').change(function(){
$('#Carrier').removeAttr('disabled');
}) ;
});

you can disabled the copmbobox in jquery like this:
$("#cbCountry").combobox("option", "disabled", true);
chk your condition and then disable the combobox as per your condition