Home/ Questions/Q 6564881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:01:29+00:00

When you click a certain element, an option will be selected. For example: you

  • 0

When you click a certain element, an option will be selected.

For example: you click on a Div element with id=”object3″, this action will automatically select the Option element “Item 3”.

Anyone know a Javascript that can do this?

HTML example

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can define onclick event handler for each div ( in HTML onclick="doSelect( this )" or by dynamic binds )

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

    Version with id’s

    var relations = { 'object1': 'item-fire', 'object2': 'item-earth', 'object3': 'item-water', 'object4': 'item-wind' };

function doSelect( el ) {
    document.getElementById( relations[ el.id ] ).selected = true;
}
    • 0