www.webdeveloper.com
Results 1 to 7 of 7

Thread: Dom Nested element

  1. #1
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75

    Dom Nested element

    How would I get a nested element like so:

    HTML Code:
    <ul class="select">
       <li class="selected">
             [B]cheese[/B]
          <ul class="drop">
             <li>bread</li>
             <li>milk</li>
             <li>apples</li>
             <li>salsa</li>
             <li>cheese</li>
          </ul>
        </li>
    </ul>
    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>

  2. #2
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Anyone? Im stumped

  3. #3
    Join Date
    Aug 2009
    Posts
    593
    I took a look, but I don't really get what you want to do?

  4. #4
    Join Date
    May 2010
    Posts
    168
    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.

  5. #5
    Join Date
    Dec 2009
    Location
    Shropshire UK
    Posts
    153
    Agree with janusmccarthy, but a simple approach

    PHP Code:
    var getMatches = function(nodesstrg){

      var 
    matches = [],
          
    len nodes.length;
        
      for (var 
    0leni+=1){
        if (
    nodes[i].innerHTML == strgmatches.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;
      
    };

  6. #6
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Thanks for the responses.

    Im trying to make a custom select menu and Im using dropdown menu but im trying to repeat the selected item and put it in the ul class drop.

  7. #7
    Join Date
    May 2010
    Posts
    168
    Here's what you want using jquery

    Code:
    <strong id="displaySelected"></strong>
    <select name="selTest" onchange="$( '#displaySelected').html(this.options[ this.selectedIndex].value);">
    <option value="cheese">cheese</option>
    <option value="bread">bread</option>
    <option value="milk">milk</option>
    <option value="honey">honey</option>
    </select>
    Or not in jquery...
    Code:
    <strong id="displaySelected"></strong>
    <select name="selTest" onchange="document.getElementById( 'displaySelected').innerHTML = this.options[ this.selectedIndex].value">
    <option value="cheese">cheese</option>
    <option value="bread">bread</option>
    <option value="milk">milk</option>
    <option value="honey">honey</option>
    </select>
    Last edited by janusmccarthy; 01-16-2011 at 12:45 AM. Reason: typo in jquery and non-jquery

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles