Question

我有一个代码，在你点击一个元素后选择一个选项：

您可以看到代码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;
};

我想在这段代码后运行代码。该代码需要模拟列表中顶部选项的单击，然后单击最后选择的选项。

有人知道这样的剧本吗？

<!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来展示我想要完成的事情：

enter image description here

Answer 1

您只需添加以下行即可点击元素：document.getElementById("yourid").click();

在你的情况下，它将是

document.getElementById("click-object-1").click();
document.getElementById("click-object-4").click();

（见http://jsfiddle.net/gMZGr/1/）

Answer 2

你可以这样做：

var select = optionElement.parentNode;
select.firstElementChild.click();
select.lastElementChild.click();

Answer 3

您可以使用setTimeout轻松完成此任务。

当用户点击“动画”中间的另一个颜色方块时，可能会很棘手。但它并不困难。 http://jsfiddle.net/pdWFX/1/

http://www.w3schools.com/jsref/met_win_settimeout.asp

模拟对选项的点击

3 个答案: