When you click a certain tag, an option will be selected.
For example: you click on a Div tag with id=“object3”, this action will automatically select the Option tag “Water”.
Anyone know a Javascript that can do this (without using the value attribute)?
<!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 id="item-fire" value="xjakgd">Fire</option>
<option id="item-earth" value="yuygas">Earth</option>
<option id="item-water" value="piowqe">Water</option>
<option id="item-wind" value="mnbvzi">Wind</option>
</select>
</li>
</ul>
</fieldset>
</form>
<div id="click-object-1" style="background-color:#F00;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
<div id="click-object-2" style="background-color:#0F0;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
<div id="click-object-3" style="background-color:#00F;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
<div id="click-object-4" style="background-color:#FF0;width:30px;height:30px;margin:4px;cursor:pointer;"></div>
</body>
</html>
Give all the divs a class of “click”, and rename them “earth”, “air”, “wind”, “water” etc.
Using jQuery i’d then try:
$('.click').click(function(){
$('#select-items').attr('selected', '');
var opt = $(this).attr('id');
var id = '#item' + opt;
$(id).attr('selected', 'selected');
}
Not tested, but something along those lines may well do the trick.
This example works without jQuery:
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width:30px;
height:30px;
margin:4px;
cursor:pointer;
}
#fire {
background-color:#F00;
}
#earth {
background-color:#0F0;
}
#water {
background-color:#00F;
}
#wind {
background-color:#FF0;
}
</style>
</head>
<body>
<form>
<select id="select_items" name="SelectItems">
<option id="item-fire" value="xjakgd">Fire</option>
<option id="item-earth" value="yuygas">Earth</option>
<option id="item-water" value="piowqe">Water</option>
<option id="item-wind" value="mnbvzi">Wind</option>
</select>
</form>
<div class="element" id="fire"></div>
<div class="element" id="earth"></div>
<div class="element" id="water"></div>
<div class="element" id="wind"></div>
<script>
var elms = document.querySelectorAll('.element'),
elSelect = document.forms[0].SelectItems;
for( var i=0; i<elms.length; i++ ) {
elms[i].addEventListener('click', function(){
elSelect.options[elSelect.selectedIndex].removeAttribute('selected');
var id = document.getElementById('item-' + this.id);
id.setAttribute('selected', 'selected');
},false);
}
</script>
</body>
</html>
Thank you centered effect, this works nicely in Firefox. However, it doesn’t work in ie6-8. I get the following error: “Object doesn’t support this property or method”. I think ie6-8 have a problem with “addEventListener”.
Np. This should work:
<script>
// From http://ejohn.org/projects/flexible-javascript-events/
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){
obj['e'+type+fn]( window.event );
}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
var elms = document.querySelectorAll('.element'),
elSelect = document.forms[0].SelectItems;
for( var i=0; i<elms.length; i++ ) {
addEvent(elms[i], 'click', function(){
elSelect.options[elSelect.selectedIndex].removeAttribute('selected');
var id = document.getElementById('item-' + this.id);
id.setAttribute('selected', 'selected');
});
}
</script>
Works in ie8, sadly doesn’t work in ie7 and ie6 
I get the error: “Object doesn’t support this property or method”
Since I don’t have IE, you will have to make it work. The addEvent code provided was documented to work in IE 5+, unless it is something else, the error noted doesn’t tell me anything - set/remove Attributes?. At that point, I would possibly use jQuery as it is a cross browser solution.
You could do:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$('.element').each(function() {
$(this).bind('click', function() {
$("select option:selected").removeAttr('selected');
$('#item-' + $(this).attr('id')).attr('selected', 'selected');
});
})
</script>
I found the problem, ie6 and ie7 don’t support querySelectorAll. I can’t use jQuery in this case. Do you know a workaround?
<script>
// Source: Sitepoint book, Simply Javascript
document.getElementsByClass = function(theClass) {
var elementArray = [];
if (typeof document.all != "undefined") {
elementArray = document.all;
} else {
elementArray = document.getElementsByTagName("*");
}
var matchedArray = [];
var pattern = new RegExp("(^| )" + theClass + "( |$)");
for (var i = 0; i < elementArray.length; i++) {
if (pattern.test(elementArray[i].className)) {
matchedArray[matchedArray.length] = elementArray[i];
}
}
return matchedArray;
};
// From http://ejohn.org/projects/flexible-javascript-events/
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e' + type + fn] = fn;
obj[type + fn] = function(){
obj['e' + type + fn]( window.event );
}
obj.attachEvent( 'on' + type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
var elms = document.getElementsByClass('element'),
elSelect = document.forms[0].SelectItems;
for( var i=0; i<elms.length; i++ ) {
addEvent(elms[i], 'click', function(){
elSelect.options[elSelect.selectedIndex].removeAttribute('selected');
var id = document.getElementById('item-' + this.id);
id.setAttribute('selected', 'selected');
});
}
</script>
That did the trick! Thank you for your help centered effect 