Question

例如，如果您点击<div id="click-object-2"></div>，该选项将切换为地球，然后转到请选择，最后返回地球< / em>再次。

我做了一个gif来展示我想要完成的事情：

任何人都知道可以执行此操作的Javascript吗？

<!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"></div> <div id="click-object-2"></div> <br /> <div id="click-object-3"></div> <div id="click-object-4"></div> </body> </html>

Answer 1

此代码应该有效：

模拟对选项的点击

<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>
<script type="text/javascript">
function grabClick(selid , optionid){
var arr = new Array();
arr['empty'] = "0";
arr['fireaway'] = 1;
arr['groundearth'] = 2;
arr['watermelon'] = 1;
arr['catchwind'] = 2;
changeTo(selid, arr[optionid]);
setTimeout(function(){changeTo(selid, "0")}, 1000);
setTimeout(function(){changeTo(selid, arr[optionid])}, 2000);
}
function changeTo(sd, od){
var sel = document.getElementById(sd);
sel.options[od].selected = true;
}
</script>

<body>


<form action="">

  <fieldset>

    <ul style="list-style:none;">
      <li>
        <select id="select_items_first" name="SelectItemsFirst">
          <option id="empty" 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 id="empty" 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='grabClick("select_items_first","fireaway");'></div>
<div id="click-object-2" onclick='grabClick("select_items_first","groundearth");'></div>

<br />

<div id="click-object-3" onclick='grabClick("select_items_second","watermelon");'></div>
<div id="click-object-4" onclick='grabClick("select_items_second","catchwind");'></div>


</body>
</html>

Answer 2

您需要使用的是Element.click();方法。就像在这个示例代码中一样：

document.querySelector("#click-object-2").addEventListener( "click", function() {
    document.querySelector("#groundearth").click();
});

要选择选项，您需要链接setTimeout来设置select.options[index].selected = true;，但是，希望您可以自己弄清楚如何做到这一点。

Answer 3

我认为你的意思是这样的：

<script type="text/javascript">
   function clickSelectNum(value) {
       document.getElementById("select_items_first").value = value;
       setTimeout(function() { document.getElementById("select_items_first").value = "choose"}, 1000);
   }
</script>

<!-- and in the div onclick event you put the function call -->
<div id="click-object-2" onclick="clickSelectNum('earth')"></div>

Answer 4

将divClicked绑定到可点击的div。

function divClicked()
{
   var timer = setTimeout(selectOption("groundEarth"), 1000);
   var timer2 = setTimeout(selectOption(), 2000);
   var timer3 = setTimeout(selectOption("groundEarth"), 3000);
}

function selectOption(optionId)
{
   if(optionId == null || optionId == '')
   {
      select.options[0].selected = 'selected';
   }
   else
   {
     $("#"+optionId).click();
   }
}

编辑：需要JQuery才能使用，否则请使用document.getElementById

模拟对选项的点击

4 个答案: