클릭 요소가 옵션을 선택합니다.

-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

있습니다 (동적 바인딩 HTML onclick="doSelect(this)" 또는으로) 각 사업부에 대한 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; 
}

와

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

버전을 온 클릭 이벤트 핸들러를 정의 할 수 있습니다

출처

2011-09-12 09:17:27 ntvf

답장을 보내 주셔서 감사합니다. 값 대신 옵션에서 ID를 사용하고 해당 ID에 숫자를 사용하지 않으면 어떻게됩니까? 이렇게 : http://jsfiddle.net/EqMh4/ – Macchiato

값이없는 옵션을 사용하여 이상하게 들립니다. 그런 식으로하면 관계 배열'var relation = { 'object1': 'item-fire', 'object2': 'item-earth', 'object3': 'item-water', 'object4' 'item-wind'};'형식 onclick_element_name : option_id_to_select'. 이 코드를 함수 본문으로 사용하는 것보다'document.getElementById (relations [el.id]) .selected = true; ' – ntvf

답장을 보내 주셔서 감사합니다! 값을 가진 옵션을 사용하지만 코드에 사용할 수 없으므로 예제에서 제외하면 더 쉬울 것이라고 생각했습니다. 혼란에 대한 죄송하고 당신의 도움을 주셔서 감사합니다 :) – Macchiato

클릭 요소가 옵션을 선택합니다.

답변

관련 문제