Macchiato Posted September 12, 2011 Share Posted September 12, 2011 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> Link to comment Share on other sites More sharing options...
thescientist Posted September 12, 2011 Share Posted September 12, 2011 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)"> Link to comment Share on other sites More sharing options...
Macchiato Posted September 12, 2011 Author Share Posted September 12, 2011 Thanks for your reply! Your code works in Firefox, but doesn't seem to work in ie6-8 I get the error: "'console' is undefined"You know a way to make it work in ie6-8? Link to comment Share on other sites More sharing options...
thescientist Posted September 12, 2011 Share Posted September 12, 2011 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. Link to comment Share on other sites More sharing options...
Macchiato Posted September 12, 2011 Author Share Posted September 12, 2011 That did the trick! Thank you for your fast reply Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.