We Keep Coding

load data in custom dropdown using JavaScript, Ajax

I am working on web application built on Spring Boot and using JavaScript as a frontend technology. So here I am facing a problem on my index page. There are dropdowns on which after clicking there are some options coming from API. The problem is, when my index page loads then if user clicks on dropdown to choose some category then data does not loaded. It is a custom dropdown.
This is an HTML of dropdown:
<div class="col-6">
<label class="sr-only" for="inlineFormInputGroup" style="color: red;"> </label>
<div class="custom-select-div">
<select id="category" name="category">
<option value='0'>Choose your category</option>
</select>
</div>
</div>
Below is my JavaScript code for custom dropdown:
<script>
$(document).ready(function() {
setTimeout(function(){
getcategorylist();
});
setTimeout(function(){
var x, i, j, l, ll, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select-div");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
document.addEventListener("click", closeAllSelect);
},500);
});
function getcategorylist(){
var maincategory = document.getElementById('maincategory').value;
$.post("<%=AkApiUrl.getcategorybymaincategory%>",{
maincategory : maincategory,
},
function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
debugger
var list = data.response;
var categorys='';
if(list.length > 0){
for (var i = 0; i < list.length; i++) {
var content = "<option value='"+list[i].categoryid+"'>"+list[i].name+"</option>";
categorys = categorys + content;
}
}
categorys = "<option value='0' style='display: none;'>Choose your category</option>"+categorys;
document.getElementById('category').innerHTML = categorys;
}else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
}
$("#searchBtn").click(function() {
var maincategoryid = document.getElementById('maincategory').value;
var latitude = document.getElementById("latitude").value;
var longitude = document.getElementById("longitude").value;
var location = document.getElementById("address").value;
var categoryid = document.getElementById("category").value;
var category = $("#category option:selected").text();
var maincategory = "Truck-Trailer";
if(maincategoryid == '1'){
maincategory = "Truck-Trailer";
}else if(maincategoryid == '2'){
maincategory = "Cars";
}else if(maincategoryid == '3'){
maincategory = "RV-Bus";
}else {
maincategory = "Truck-Trailer";
}
if (latitude == "" || latitude == null || longitude == "" || longitude == null || categoryid == 0) {
if (latitude == "" || latitude == null || longitude == "" || longitude == null) {
$("#location").addClass("errorInput");
return false;
} else {
$("#location").removeClass("errorInput");
}
if (categoryid == 0) {
$("#category").addClass("errorInput");
return false;
} else {
$("#category").removeClass("errorInput");
}
}else{
category = category.replaceAll(" & ", "-").replaceAll(" ", "-");
location = location.replaceAll(", ", "-").replaceAll("&", "-").replaceAll(" ", "_");
document.getElementById("listingForm").action = "<%=WebUrl.listing%>/"+maincategory+"/"+category+"/"+location;
document.getElementById("listingForm").submit();
}
});
</script>
Data did not get loaded on first time when DOM loaded after refreshing page from 1-2 times then sometimes data get visible inside the dropdown. So what should I do?

Not understood weird variable behavior in checkers game JavaScript

I'm programming a checkers game for a high school project. I have a weird variable behaviour and I can't figure out why it's happening. Let me show you the code:
var player = 1;
var lastClicked;
var wasClicked = false;
var isEmpty = new Array(8);
for (var i = 0; i < 8; i++) {
isEmpty[i] = new Array(8);
for (var j = 0; j < 8; j++) {
isEmpty[i][j] = true;
}
}
function CreateBoard() {
var board = document.createElement("table");
board.cellSpacing = 0;
for (var i = 0; i < 8; i++) {
var tr1 = document.createElement("tr");
for (var j = 0; j < 8; j++) {
var td1 = document.createElement("td");
td1.setAttribute("id", "td" + i + j);
td1.addEventListener("click", function () { CheckIandJForLater(i, j); });
if (i % 2 == 0) {
if (j % 2 == 0)
td1.style.backgroundColor = "beige";
else
td1.style.backgroundColor = "black";
}
else {
if (j % 2 == 0)
td1.style.backgroundColor = "black";
else
td1.style.backgroundColor = "beige";
}
tr1.appendChild(td1);
}
board.appendChild(tr1);
}
document.body.appendChild(board);
}
function CheckIandJForLater(i, j) { // A function which is meant to show the weird behavior, which prevents me from using function I want to use in the event listener
alert("Function i: " + i);
alert("Function j: " + j);
}
function DeployPieces() {
CreateBoard();
var pieceIndex = 1;
for (var i = 0; i < 8; i++) {
if (i < 3) {
if (i % 2 == 0) {
for (var j = 1; j < 8; j += 2) {
var td1 = document.getElementById("td" + i + j);
var circle1 = document.createElement("span");
circle1.setAttribute("class", "redCircle");
circle1.setAttribute("id", "circle" + i + j);
wasFilled = true;
circle1.setAttribute("onclick", "AlertToPressOnSquare(); lastClicked = this; wasClicked = true;");
td1.appendChild(circle1);
isEmpty[i][j] = false;
}
}
else {
for (var j = 0; j < 8; j += 2) {
var td2 = document.getElementById("td" + i + j);
var circle2 = document.createElement("span");
circle2.setAttribute("class", "redCircle");
circle2.setAttribute("id", "circle" + i + j);
wasFilled = true;
circle2.setAttribute("onclick", "AlertToPressOnSquare(); lastClicked = this; wasClicked = true;");
td2.appendChild(circle2);
isEmpty[i][j] = false;
}
}
}
else if (i > 4) {
if (i % 2 == 0) {
for (var j = 1; j < 8; j += 2) {
var td3 = document.getElementById("td" + i + j);
var circle3 = document.createElement("span");
circle3.setAttribute("class", "whiteCircle");
circle3.setAttribute("id", "circle" + i + j);
wasFilled = true;
circle3.setAttribute("onclick", "AlertToPressOnSquare(); lastClicked = this; wasClicked = true;");
td3.appendChild(circle3);
isEmpty[i][j] = false;
}
}
else {
for (var j = 0; j < 8; j += 2) {
var td4 = document.getElementById("td" + i + j);
var circle4 = document.createElement("span");
circle4.setAttribute("class", "whiteCircle");
circle4.setAttribute("id", "circle" + i + j);
wasFilled = true;
circle4.setAttribute("onclick", "AlertToPressOnSquare(); lastClicked = this; wasClicked = true;");
td4.appendChild(circle4);
isEmpty[i][j] = false;
}
}
}
}
}
function AlertToPressOnSquare() {
alert("Player " + player + ", please press on the square to which you would like to move the piece");
if (player == 1)
player = 2;
else if (player == 2)
player = 1;
}
function MoveToSquare(i, j) { //The function I want to use in the td1 event listener
if (wasClicked && isEmpty[i][j]) {
var lastClickedId = lastClicked.getAttribute("id");
var lastClickedLocation = lastClickedId[6] + lastClickedId[7];
var v1 = parseInt(lastClickedId[6], 10);
var v2 = parseInt(lastClickedId[7], 10);
var tdFrom = document.getElementById("td" + lastClickedLocation);
var tdTo = document.getElementById("td" + i.toString() + j.toString());
if (lastClicked.getAttribute("class") == "whiteCircle") {
if (v1 == i - 1 && (v2 == j - 1 || v2 == j + 1)) {
tdFrom.removeChild(lastClicked);
tdTo.appendChild(lastClicked);
}
}
else if (lastClicked.getAttribute("class") == "redCircle") {
if (v1 == i + 1 && (v2 == j - 1 || v2 == j + 1)) {
tdFrom.removeChild(lastClicked);
tdTo.appendChild(lastClicked);
}
}
alert("Player " + player + ", please press on the piece you would like to move");
wasClicked = false;
}
}
So, the weird behavior is as follows: Every time I click on a td in the table and run the CheckIandJForLater function, I get the value 8 for both i and j. They should not get these values, as i and j are supposed to be updated in the for loop. Moreover, they should never reach the value of 8, since both the loops run between 0 and 7.
It's also worth noting that if I put alert(i); and alert(j); regularly, without the CheckIAndJForLater function, their values are printed fine.
I really struglle in finding out how to solve this weird behavior. May someone help me? Thank you.
Why is that behavior happening? Is there a solution?

How to apply different colors to Placeholder and input textbox value?

I am using http://jamesallardice.github.io/Placeholders.js/ placeholders.jquery.js (v3.0.2 unminified, 18kb) this file for Internet Explorer 9 (IE9).
In this file I changed
placeholderStyleColor = "#ccc",
styleRules = document.createTextNode("." + placeholderClassName + " { color:" + placeholderStyleColor + "; }");
to
placeholderStyleColor = "#B8B8B8",
styleRules = document.createTextNode("." + placeholderClassName + " { color:" + placeholderStyleColor + "!important" + "; }");
then In Texbox field' placeholder color is now #B8B8B8.
But Problem is :
B8B8B8 color is applied on both textbox placeholder and value because I added !important to color style.
I want to do is B8B8B8 color need to apply to placeholder only.

Place holder Support though java script
var _debug = false;
var _placeholderSupport = function() {
var t = document.createElement("input");
t.type = "text";
return (typeof t.placeholder !== "undefined");
}();
window.onload = function() {
var arrInputs = document.getElementsByTagName("input");
var arrTextareas = document.getElementsByTagName("textarea");
var combinedArray = [];
for (var i = 0; i < arrInputs.length; i++)
combinedArray.push(arrInputs[i]);
for (var i = 0; i < arrTextareas.length; i++)
combinedArray.push(arrTextareas[i]);
for (var i = 0; i < combinedArray.length; i++) {
var curInput = combinedArray[i];
if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea")
HandlePlaceholder(curInput);
else if (curInput.type == "password")
ReplaceWithText(curInput);
}
if (!_placeholderSupport) {
for (var i = 0; i < document.forms.length; i++) {
var oForm = document.forms[i];
if (oForm.attachEvent) {
oForm.attachEvent("onsubmit", function() {
PlaceholderFormSubmit(oForm);
});
}
else if (oForm.addEventListener)
oForm.addEventListener("submit", function() {
PlaceholderFormSubmit(oForm);
}, false);
}
}
};
function PlaceholderFormSubmit(oForm) {
for (var i = 0; i < oForm.elements.length; i++) {
var curElement = oForm.elements[i];
HandlePlaceholderItemSubmit(curElement);
}
}
function HandlePlaceholderItemSubmit(element) {
if (element.name) {
var curPlaceholder = element.getAttribute("placeholder");
if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) {
element.value = "";
window.setTimeout(function() {
element.value = curPlaceholder;
}, 100);
}
}
}
function ReplaceWithText(oPasswordTextbox) {
if (_placeholderSupport)
return;
var oTextbox = document.createElement("input");
oTextbox.type = "text";
oTextbox.id = oPasswordTextbox.id;
oTextbox.name = oPasswordTextbox.name;
//oTextbox.style = oPasswordTextbox.style;
oTextbox.className = oPasswordTextbox.className;
for (var i = 0; i < oPasswordTextbox.attributes.length; i++) {
var curName = oPasswordTextbox.attributes.item(i).nodeName;
var curValue = oPasswordTextbox.attributes.item(i).nodeValue;
if (curName !== "type" && curName !== "name") {
oTextbox.setAttribute(curName, curValue);
}
}
oTextbox.originalTextbox = oPasswordTextbox;
oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox);
HandlePlaceholder(oTextbox);
if (!_placeholderSupport) {
oPasswordTextbox.onblur = function() {
if (this.dummyTextbox && this.value.length === 0) {
this.parentNode.replaceChild(this.dummyTextbox, this);
}
};
}
}
function HandlePlaceholder(oTextbox) {
if (!_placeholderSupport) {
//alert(oTextbox.tagName);
var curPlaceholder = oTextbox.getAttribute("placeholder");
if (curPlaceholder && curPlaceholder.length > 0) {
Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
oTextbox.value = curPlaceholder;
oTextbox.setAttribute("old_color", oTextbox.style.color);
oTextbox.style.color = "#c0c0c0";
oTextbox.onfocus = function() {
var _this = this;
if (this.originalTextbox) {
_this = this.originalTextbox;
_this.dummyTextbox = this;
this.parentNode.replaceChild(this.originalTextbox, this);
_this.focus();
}
Debug("input box '" + _this.name + "' focus");
_this.style.color = _this.getAttribute("old_color");
if (_this.value === curPlaceholder)
_this.value = "";
};
oTextbox.onblur = function() {
var _this = this;
Debug("input box '" + _this.name + "' blur");
if (_this.value === "") {
_this.style.color = "#c0c0c0";
_this.value = curPlaceholder;
}
};
}
else {
Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
}
}
else {
Debug("browser has native support for placeholder");
}
}
function Debug(msg) {
if (typeof _debug !== "undefined" && _debug) {
var oConsole = document.getElementById("Console");
if (!oConsole) {
oConsole = document.createElement("div");
oConsole.id = "Console";
document.body.appendChild(oConsole);
}
oConsole.innerHTML += msg + "<br />";
}
}
Css for input color
.mypassword { background-color: lightgreen; }
input[type="text"]:focus {
color: red;
}
DemoFiddle

Javascript Fade producing unexpected results

I have a HTML page with three sets of images on. I want each image from each set to stay visible for 5 seconds, then fade out together and, when all three are invisible, fade back in together. Then the process begins again. I am trying to do this without using JQuery.
I wrote a JavaScript to do this, and it works, but after a while strange things happen. Images stop fading out, in, or do so too soon.
Here is the relevant HTML:
<body onload="HideAll(fade1Image2, fade1Image3, fade1Image4, fade2Image2,
fade2Image3, fade2Image4, fade3Image2, fade3Image3, fade3Image4);
SetVariables(4,4,4);">
<div id="fade1Image1" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/PowerStation1.jpg" alt="Power Station 1" />
</div>
<div id="fade1Image2" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/PowerStation2.jpg" alt="Power Station 2" />
</div>
<div id="fade1Image3" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/FenceLine1.jpg" alt="Fence Line 1" />
</div>
<div id="fade1Image4" style="position:absolute;top:0px;left:312px;">
<img src="Images/Home/Power_Station/FenceLine2.jpg" alt="Fence Line 2" />
</div>
<div id="fade2Image1" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal1.jpg" alt="LNG Terminal 1" />
</div>
<div id="fade2Image2" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal2.jpg" alt="LNG Terminal 2" />
</div>
<div id="fade2Image3" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal3.jpg" alt="LNG Terminal 3" />
</div>
<div id="fade2Image4" style="position:absolute;top:208px;left:0px;">
<img src="Images/Home/LNG_Terminal_Set/LNGTerminal4.jpg" alt="LNG Terminal 4" />
</div>
<div id="fade3Image1" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/AirPort1.jpg" alt="Air Port 1" />
</div>
<div id="fade3Image2" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/AirPort2.jpg" alt="Air Port 2" />
</div>
<div id="fade3Image3" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/T1_Tracker.jpg" alt="TI Tracker 1" />
</div>
<div id="fade3Image4" style="position:absolute;top:416px;left:312px;">
<img src="Images/Home/Airports/Targets_Tracked_no_alarm.jpg" alt="TI Tracker 2" />
</div>
And Here is the JavaScript:
var TimeToFade = 1000.0;
var maxCount;
var count;
function SetVariables()
{
maxCount = new Array(arguments.length);
count = arguments.length + 1;
for (var x = 0; x < arguments.length; x++)
{
maxCount[x] = arguments[x];
}
}
function fade(counter)
{
var eid, countx;
for (var x = 1; x < count; x++)
{
countx = counter % maxCount[x-1];
if (countx == 0)
countx = maxCount[x-1];
eid = "fade" + x + "Image" + countx;
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
if (x == 3)
setTimeout("animateFade(" + new Date().getTime() + ",'" + counter + "')", 33);
}
}
}
function animateFade(lastTick, counter)
{
var eid, countx;
for (var x = 1; x < count; x++)
{
countx = counter % maxCount[x-1];
if (countx == 0)
countx = maxCount[x-1];
eid = "fade" + x + "Image" + countx;
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
if (element.FadeState == 2 && x == count-1)
{
setTimeout(function(){fade(counter)}, 5000);
hidetext(TextBlock1, TextBlock2, Text2Block1, Text2Block2, Text3Block1, Text3Block2);
}
else if (x == count-1)
{
counter++;
fade(counter);
}
if (x == count-1)
return;
}
else if (element.FadeTimeLeft > elapsedTicks)
{
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
}
}
setTimeout("animateFade(" + curTick + ",'" + counter + "')", 33);
}
function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
arguments[i].style.opacity = 0;
arguments[i].style.filter = 'alpha(opacity = 0)';
arguments[i].FadeState = -2;
}
setTimeout(function(){fade(1)}, 5000);
}
I can't see what I have done to produce this error; any help would be greatly appreciated.
To see the code in action, click here.

This doesn't really answer the question, but I rewrote the javascript from scratch and it seems to work. So, for completeness, here it is:
var Count = new Array(1, 1, 1);
var MaxCount = new Array(8, 6, 5);
var FadeState = "out";
var FadeTime = new Array(100, 100, 100);
function Fade()
{
for (var x = 0; x < 3; x++)
{
var id = "fade" + (x+1) + "Image" + Count[x];
var element = document.getElementById(id)
if (FadeState == "out")
{
if (FadeTime[x] > 0)
{
FadeTime[x]-= 5;
element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')';
element.style.opacity = FadeTime[x]/100;
}
else
{
Count[x]++;
if (Count[x] > MaxCount[x])
Count[x] = 1;
if (x == 2)
FadeState = "back";
}
}
else
{
if (FadeTime[x] < 100)
{
FadeTime[x]+= 5;
element.style.filter = 'alpha(opacity = ' + FadeTime[x] + ')';
element.style.opacity = FadeTime[x]/100;
}
else
{
if (x == 2)
FadeState = "pause";
}
}
}
switch (FadeState)
{
case "back":
FadeState = "in";
Fade();
break;
case "pause":
FadeState = "out";
setTimeout(function(){Fade()}, 5000);
break;
default:
setTimeout(function(){Fade()}, 20);
}
}
function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
var element = document.getElementById(arguments[i]);
element.style.opacity = 0;
element.style.filter = 'alpha(opacity = 0)';
}
setTimeout(function(){Fade()}, 5000);
}

You need to put quotes around the ids, when you call the HideAll method
HideAll('fade1Image2', 'fade1Image3', 'fade1Image4', 'fade2Image2',
'fade2Image3', 'fade2Image4', 'fade3Image2', 'fade3Image3', 'fade3Image4')
And you need to actually find the elements before setting their styles..
function HideAll()
{
for (var i = 0; i < arguments.length; i++)
{
var element = document.getElementById( arguments[i] );
element.style.opacity = 0;
element.style.filter = 'alpha(opacity = 0)';
element.FadeState = -2;
}
setTimeout(function(){fade(1)}, 5000);
}

addon for Custom HTML Form Elements by Ryan Fait?

i'm using a js snippet of ryan fait
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
when i submit my form on the website and an required field is empty i change the background-color of the input (for example) from white to red! so far is all ok..
i have also a selectbox in my form. the selectbox will be replaced with class="styled" into the imagebackground. (works all fine)
<select id="name" name="name" class="styled">
<option value="1" selected="selected">Please select an option</option>
<option value="2" >option 1</option>
<option value="3" >option 2</option>
</select>
but when i leave for example the selectbox empty and submit the form i want also a red background.
is there a way 2 modify the js-code where i have a select.gif and a select_error.gif as background-image
/*
CUSTOM FORM ELEMENTS
Created by Ryan Fait
www.ryanfait.com
The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.
You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.
The value of selectWidth should be the width of your select list image.
Visit http://ryanfait.com/ for more information.
*/
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";
/* No need to change anything after this */
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.backgroundPosition = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;

Sorry, my jquery is a little rusty (i.e. nonexistent), however using javascript, you could do:
var e = document.getElementById("name");
if (e.options[e.selectedIndex].value == 1) {
e.className = "styled";
}