SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Click tag will select option

    When you click a certain tag, an option will be selected.

    For example: you click on a Div tag with id="object3", this action will automatically select the Option tag "Water".

    Anyone know a Javascript that can do this (without using the value attribute)?


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Click tag will select option</title>
    </head>
    
    <body>
    
    
    <form action="">
    
      <fieldset>
      
        <ul style="list-style:none;">
          <li>
            <select id="select_items" name="SelectItems">
              <option id="item-fire" value="xjakgd">Fire</option>
              <option id="item-earth" value="yuygas">Earth</option>
              <option id="item-water" value="piowqe">Water</option>
              <option id="item-wind" value="mnbvzi">Wind</option>
            </select>
          </li>
        </ul>
              
      </fieldset>
    
    </form>
    
    <div id="click-object-1" style="background-color:#F00;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
    <div id="click-object-2" style="background-color:#0F0;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
    <div id="click-object-3" style="background-color:#00F;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
    <div id="click-object-4" style="background-color:#FF0;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
    
    
    </body>
    </html>
    "Take a seat and have a coffee." -- Macchiato

  2. #2
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Give all the divs a class of "click", and rename them "earth", "air", "wind", "water" etc.

    Using jQuery i'd then try:
    Code:
    $('.click').click(function(){
      $('#select-items').attr('selected', '');
      var opt = $(this).attr('id');
      var id = '#item' + opt;
      $(id).attr('selected', 'selected');
    }
    Not tested, but something along those lines may well do the trick.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This example works without jQuery:

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			.element {
    				width:30px;
    				height:30px;
    				margin:4px;
    				cursor:pointer;
    			}
    			#fire {
    				background-color:#F00;
    			}
    			#earth {
    				background-color:#0F0;
    			}
    			#water {
    				background-color:#00F;
    			}
    			#wind {
    				background-color:#FF0;
    			}
    		</style>
    	</head>
    	<body>
    		<form>
    			<select id="select_items" name="SelectItems">
    				<option id="item-fire" value="xjakgd">Fire</option>
    				<option id="item-earth" value="yuygas">Earth</option>
    				<option id="item-water" value="piowqe">Water</option>
    				<option id="item-wind" value="mnbvzi">Wind</option>
    			</select>
    		</form>
    		<div class="element" id="fire"></div>
    		<div class="element" id="earth"></div>
    		<div class="element" id="water"></div>
    		<div class="element" id="wind"></div>
    		
    		<script>
    			var elms = document.querySelectorAll('.element'),
    				elSelect = document.forms[0].SelectItems;
    			for( var i=0; i<elms.length; i++ ) {
    				elms[i].addEventListener('click', function(){
    					elSelect.options[elSelect.selectedIndex].removeAttribute('selected');
    					var id = document.getElementById('item-' + this.id);
    					id.setAttribute('selected', 'selected');
    				},false);
    			}
    		</script>
    	</body>
    </html>

  4. #4
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you centered effect, this works nicely in Firefox. However, it doesn't work in ie6-8. I get the following error: "Object doesn't support this property or method". I think ie6-8 have a problem with "addEventListener".
    "Take a seat and have a coffee." -- Macchiato

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Np. This should work:
    Code:
    <script>
    	// From http://ejohn.org/projects/flexible-javascript-events/
    	function addEvent( obj, type, fn ) {
    		if ( obj.attachEvent ) {
    			obj['e'+type+fn] = fn;
    			obj[type+fn] = function(){
    				obj['e'+type+fn]( window.event );
    			}
    			obj.attachEvent( 'on'+type, obj[type+fn] );
    		} else {
    			obj.addEventListener( type, fn, false );
    		}
    	}		
    
    
    	var elms = document.querySelectorAll('.element'),
    		elSelect = document.forms[0].SelectItems;
    	for( var i=0; i<elms.length; i++ ) {
    		addEvent(elms[i], 'click', function(){
    			elSelect.options[elSelect.selectedIndex].removeAttribute('selected');
    			var id = document.getElementById('item-' + this.id);
    			id.setAttribute('selected', 'selected');
    		});
    	}
    </script>

  6. #6
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works in ie8, sadly doesn't work in ie7 and ie6
    I get the error: "Object doesn't support this property or method"
    "Take a seat and have a coffee." -- Macchiato

  7. #7
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Since I don't have IE, you will have to make it work. The addEvent code provided was documented to work in IE 5+, unless it is something else, the error noted doesn't tell me anything - set/remove Attributes?. At that point, I would possibly use jQuery as it is a cross browser solution.

    You could do:
    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    <script>
    	$('.element').each(function() {
    		$(this).bind('click', function() {
    			 $("select option:selected").removeAttr('selected');
    			 $('#item-' + $(this).attr('id')).attr('selected', 'selected');
    		});
    	})
    </script>

  8. #8
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the problem, ie6 and ie7 don't support querySelectorAll. I can't use jQuery in this case. Do you know a workaround?
    "Take a seat and have a coffee." -- Macchiato

  9. #9
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script>
    	// Source: Sitepoint book, Simply Javascript
    	document.getElementsByClass = function(theClass) {
    		var elementArray = [];
    		if (typeof document.all != "undefined") {
    	  		elementArray = document.all;
    		} else {
    	  		elementArray = document.getElementsByTagName("*");
    		}
    		var matchedArray = [];
    		var pattern = new RegExp("(^| )" + theClass + "( |$)");
    		for (var i = 0; i < elementArray.length; i++) {
    	  		if (pattern.test(elementArray[i].className)) {
    	      		matchedArray[matchedArray.length] = elementArray[i];
    			}
    	  	}
    	  	return matchedArray;
    	};	
    	
    	// From http://ejohn.org/projects/flexible-javascript-events/
    	function addEvent( obj, type, fn ) {
    		if ( obj.attachEvent ) {
    			obj['e' + type + fn] = fn;
    			obj[type + fn] = function(){
    				obj['e' + type + fn]( window.event );
    			}
    			obj.attachEvent( 'on' + type, obj[type+fn] );
    		} else {
    			obj.addEventListener( type, fn, false );
    		}
    	}				
    
    	var elms = document.getElementsByClass('element'),
    		elSelect = document.forms[0].SelectItems;
    	for( var i=0; i<elms.length; i++ ) {
    		addEvent(elms[i], 'click', function(){
    			elSelect.options[elSelect.selectedIndex].removeAttribute('selected');
    			var id = document.getElementById('item-' + this.id);
    			id.setAttribute('selected', 'selected');
    		});
    	}
    </script>

  10. #10
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick! Thank you for your help centered effect
    "Take a seat and have a coffee." -- Macchiato


Tags for this Thread

Bookmarks

Posting Permissions

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