Jump to content
Sign in to follow this  
Macchiato

Click Tag Will Select Option

Recommended Posts

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)?

<!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>

Share this post


Link to post
Share on other sites

I would probably create a mapping between the elements you can click, and the option element they would correspond too. Then use that as the way to get a reference to the element so that you can select it.

function setAsSelectedOption(referrerElement){  console.log('ENTER setAsSelectedOption');  var clickToOptionMap = {	'click-object-1'  :  'item-fire',	'click-object-2'  :  'item-earth',	'click-object-3'  :  'item-water',	'click-object-4'  :  'item-wind'  };  var optionId = clickToOptionMap[referrerElement.id];  var optionElement = document.getElementById(optionId);   optionElement.selected = true;}; ..<div id="click-object-1" onclick="setAsSelectedOption(this)">

Edited by thescientist
  • Like 2

Share this post


Link to post
Share on other sites

you can just take that line out. or read the end of this thread for info about the console.http://w3schools.invisionzone.com/index.php?showtopic=39647 It's just a preferred option as opposed to alerting stuff. You can just take it out if everything's working, I'm always just in the habit of logging my work. Professional habit I suppose.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...