模拟对选项的点击
我有一个代码,在您单击元素后选择一个选项:
你可以在这里看到代码
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;
};
我想在这段代码后运行代码.该代码需要模拟列表中顶部选项的单击,然后单击最后选择的选项.
有谁知道这样的剧本？
<!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>
************************************更新2011-09-14************************************
我做了一个gif来展示我想要完成的事情:
您只需添加以下行即可单击元素：document.getElementById("yourid").click();
在你的情况下，这将是
document.getElementById("click-object-1").click();
document.getElementById("click-object-4").click();
（参见http://jsfiddle.net/gMZGr/1/）