I want to be able to get the element in cheese. As you can see Im doing a custom select menu, here is the code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">
/* reset/general styles */
body {font-family:Arial, Helvetica, sans-serif;font-size:13px;}
ul, li {padding:0;margin:0;list-style-type:none; cursor:pointer;}
ul.select li {padding:1px 0 1px 5px;}
/* Select Menu */
ul.select {width:76px;} /* temporary */
ul.select {background: url(arrow_dwn.gif) 93% center no-repeat;display:inline-block;}
ul.select.open ul.drop {display:block;} /* this displays the dropdown menu when clicked */
ul.select li.selected {border:1px solid #CCC;position:relative;}
/* Dropdown Menu (contains the different options */
ul.drop {display:none;width:100%;position:absolute;border:1px solid black;left:-1px;top:100%;margin-top:1px;}
ul.drop li {display:block; background:white;}
ul.drop li.selected {border:0;position:static;} /* any styling on ul.select li.selected needs to be reversed here */
ul.drop li.hover {background:blue;color:white;}
</style><script type="text/javascript">
window.onload = styleSelect;
function styleSelect() {
var sel = document.getElementsByTagName("select");
// loop through all of the <select> tags
for (var i=0; i<sel.length; i++) {
// if it has the class name of select, activate function
if (sel[i].className == "select") {
replaceSelect(sel[i]);
}
}
}
function replaceSelect(sl) {
// append "replaced" to the <select> tag classname
sl.className += " replaced";
var ul = document.createElement("ul");
var drop = document.createElement("ul");
var opts = sl.options;
// loop through options to find which one is selected
for (var i=0; i<opts.length; i++) {
var selOp;
if (opts[i].selected) {
selOp = i;
break;
} else { selOp = 0;}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement("li");
var liTxt = document.createTextNode(opts[i].text);
ul.className = "select";
drop.className = "drop";
ul.appendChild(li);
li.appendChild(liTxt);
document.body.appendChild(ul);
if (i == selOp) {
var liSel = li;
liSel.className = "selected";
liSel.appendChild(drop);
}
else {
drop.appendChild(li);
li.parentNode.style.border = "1px solid red";
}
}
}
</script><link rel="stylesheet" type="text/css" href="style.css" /></head><body><h1>Grocery List</h1><p>I only have money for one item, please choose one for me.</p>
Test: <select class="select"><option value="cheese">cheese</option><option value="milk">milk</option><option value="bread">bread</option><option value="apples">apples</option><option value="peanuts">peanuts</option><option value="salsa">salsa</option></select><br /><br />
Test:
</body></html>
First of all, you have two elements that contain the value of "cheese". There's no such thing as a cheese element. Which do you want?
In general there are tons of ways to do this:
Select elements by class name.
Select elements and traversing its children.
Select an element by id.
Attach an event to your select box, that on select, returns the value of the option selected.
It's really kind of dependent upon your situation. You have to tell us more.
for (var i = 0; i < len; i+=1){
if (nodes[i].innerHTML == strg) matches.push(nodes[i]);
}
// return an array of matches
return matches;
};
var liItems = document.getElementsByTagName('li'), // list elements
elems = getMatches(liItems, 'cheese'); // ['li']
// just a test
elems[0].style.color = 'red';
If you're looking to utilise getElementsByClassName, which was my initial thought then this might be useful.
Code:
var getClass = function(clssName, rootNode /*optional root node to start search from*/){
var root = rootNode || document,
clssEls = [],
elems,
clssReg = new RegExp("\\b"+clssName+"\\b");
// use the built in getElementsByClassName if available
if (document.getElementsByClassName){
return root.getElementsByClassName(clssName);
}
// otherwise loop through all(*) nodes and add matches to clssEls
elems = root.getElementsByTagName('*');
for (var i = 0, len = elems.length; i < len; i+=1){
if (clssReg.test(elems[i].className)) clssEls.push(elems[i])
}
return clssEls;
};
Reply With Quote
Bookmarks