单击元素将选择选项
Click element will select option
当你点击某个元素时,一个选项将被选中。
例如:单击id="object3"的Div元素,此操作将自动选择Option元素"Item 3"。
谁知道一个Javascript可以做到这一点?
HTML例子<!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>Click tag will select option</title>
</head>
<body>
<form action="">
<fieldset>
<ul style="list-style:none;">
<li>
<select id="select_items" name="SelectItems">
<option value="Item1">Item 1</option>
<option value="Item2">item 2</option>
<option value="Item3">Item 3</option>
<option value="Item4">item 4</option>
</select>
</li>
</ul>
</fieldset>
</form>
<div id="object1" style="background-color:#F00;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
<div id="object2" style="background-color:#0F0;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
<div id="object3" style="background-color:#00F;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
<div id="object4" style="background-color:#FF0;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
</body>
</html>
您可以为每个div定义onclick事件处理程序(在HTML onclick="doSelect( this )"
中或通过动态绑定)
function doSelect( el ) {
var sel_id = el.id.replace( 'object', '' );
document.getElementById( 'select_items' ).value = 'Item' + sel_id;
}
版本号
var relations = { 'object1': 'item-fire', 'object2': 'item-earth', 'object3': 'item-water', 'object4': 'item-wind' };
function doSelect( el ) {
document.getElementById( relations[ el.id ] ).selected = true;
}
相关文章:
- 使用此选项选择父类内部的类
- 更新:仅根据单选按钮和所选选项选择特定项目
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- ng-单击在IE中不起作用的选项选择Angularjs
- 从选项选择中删除值
- On为<选项>选择等效项
- 用户界面先前选择的选项选择更改
- 使用ng重复或ng选项和删除空白选项选择长方体角度
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 输入:选中,选项:选择选择器
- 根据使用angularjs从下拉菜单中选择的选项选择适当的复选框
- 如何根据 html 中的选项/选择重定向用户(单击按钮后)
- 使用ng选项选择中的ng选项进行过滤器下拉列表
- 如何设置选项选择的值
- 如何搜索长下拉选项/选择列表
- jQuery - 根据下拉选项选择列出结果
- 从选项选择单击时打开 2 个 URL
- 在 Angular JS 中为 ng 选项选择默认值
- 下拉选项选择的操作
- 通过单击单选按钮清除所有选项选择条目