Simulate clicks on options_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-04 14:57 出处：网络

I have a code that selects an option after you clicked an element: You can see the code here function setAsSelectedOption(referrerElement){

相关专题：javascript

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;
};

I'd like to run a code after this code. That code needs to simulate a click on the top option in the list and then clicks back on the last selected option.

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:

Simulate clicks on options

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

Simulate clicks on options

精彩评论

关注公众号

热门标签

图文推荐

Simulate clicks on options

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：