gpt4 book ai didi

javascript - 模拟点击选项

转载 作者:行者123 更新时间:2023-11-29 22:30:09 26 4
gpt4 key购买 nike

例如,如果您单击 <div id="click-object-2"></div>该选项将切换到地球,然后是请选择,最后再次返回地球

我制作了一个 gif 来展示我想要完成的事情:

enter image description here


有人知道可以执行此操作的 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>

最佳答案

这段代码应该可以工作:

模拟点击选项

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

关于javascript - 模拟点击选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7431601/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com