单击元素将选择选项

-1

当您单击某个元素时，将选择一个选项。单击元素将选择选项

例如：您单击id =“object3”的Div元素，此操作将自动选择Option元素“Item 3”。

任何人都知道一个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>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>

来源

2011-09-12 Macchiato

标题严重含糊不清。此外，一个*标记*不能被点击，但一个*元素*可以。标签是“a”或“div”，而元素是完整的'

'。 – Christian

感谢您通知我，我已更正标题。 – Macchiato

您可以定义onclick事件处理程序的每个格（在HTML onclick="doSelect(this)"或动态绑定）

function doSelect(el) { 
    var sel_id = el.id.replace('object', ''); 
    document.getElementById('select_items').value = 'Item' + sel_id; 
}

版本与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; 
}

来源

2011-09-12 09:17:27 ntvf

感谢您的回复ntvf。如果你在选项中使用一个id而不是一个值，并且你不使用该id中的数字？像这样：http://jsfiddle.net/EqMh4/ – Macchiato

听起来很奇怪，使用没有值的选项。如果你需要这样的方式，你可以使用关系数组var'关系数组'：'object1'：'item-fire'，'object2'：'item-earth'，'object3'：'item-water'，'object4'： 'item-wind'};'格式'onclick_element_name：option_id_to_select'。比使用此代码作为函数体'document.getElementById（关系[el.id]）.selected = true;' – ntvf

感谢您的回复！我确实使用了带有值的选项，但是如果我将它们排除在示例之外，我认为它会更容易，因为它们不能用于代码。对不起，感谢您的帮助:) – Macchiato

单击元素将选择选项

回答

相关问题