Simulate clicks on options
I have a code that selects an option after you clicked an element:
You can see the code here
function setAsSelectedOption(referrerElement){
var clickToOptionMap = {
'click-object-1' : 'fireaway',
'click-object-2' : 'groundearth',
'click-object-3' : 'watermelon',
'click-object-4' : 'catchwind'
};
var optionId = clickToOptionMap[referrerElement.id];
var optionElement = document.getElementById(optionId);
optionElement.selected = true;
};
Anyone know of such a script?
<!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>Simulate clicks on options</title>
</head>
<style type="text/css">
div
{
width:30px;
height:30px;
margin:4px;
cursor:pointer;
}
#click-object-1{background-color:#F00;}
#click-object-2{background-color:#0F0;}
#click-object-3{background-color:#00F;}
#click-object-4{background-color:#FF0;}
</style>
<body>
<form action="">
<fieldset>
<ul style="list-style:none;">
<li>
开发者_运维知识库 <select id="select_items_first" name="SelectItemsFirst">
<option value="choose">Please choose</option>
<option id="fireaway" value="xjakgd">Fire</option>
<option id="groundearth" value="yuygas">Earth</option>
</select>
</li>
<li>
<select id="select_items_second" name="SelectItemsSecond">
<option value="choosemore">Please choose</option>
<option id="watermelon" value="piowqe">Water</option>
<option id="catchwind" value="mnbvzi">Wind</option>
</select>
</li>
</ul>
</fieldset>
</form>
<div id="click-object-1" onclick="setAsSelectedOption(this)"></div>
<div id="click-object-2" onclick="setAsSelectedOption(this)"></div>
<br />
<div id="click-object-3" onclick="setAsSelectedOption(this)"></div>
<div id="click-object-4" onclick="setAsSelectedOption(this)"></div>
<script type="text/javascript">
function setAsSelectedOption(referrerElement){
var clickToOptionMap = {
'click-object-1' : 'fireaway',
'click-object-2' : 'groundearth',
'click-object-3' : 'watermelon',
'click-object-4' : 'catchwind'
};
var optionId = clickToOptionMap[referrerElement.id];
var optionElement = document.getElementById(optionId);
optionElement.selected = true;
};
</script>
</body>
</html>
************************************ UPDATE 2011-09-14 ************************************
I made a gif to show what I'd like to accomplish:
You just have to add the following line to click an element: document.getElementById("yourid").click();
In your case, it would be
document.getElementById("click-object-1").click();
document.getElementById("click-object-4").click();
(see http://jsfiddle.net/gMZGr/1/ )
You could do:
var select = optionElement.parentNode;
select.firstElementChild.click();
select.lastElementChild.click();
You can easily, accomplish that with the use of setTimeout.
It may be tricky when the user clicks another color square in the middle of the "animation". but its not that difficult. http://jsfiddle.net/pdWFX/1/
http://www.w3schools.com/jsref/met_win_settimeout.asp
加载中,请稍侯......
精彩评论