單擊元素將選擇選項

-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

單擊元素將選擇選項

回答

相關問題