Advanced Search

Return to Snippet

Revision: 4473
at December 19, 2007 05:04 by timka
Initial Code 
<html>
<head>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript'>
function change_country(type, value) {
$('country_type').value=type;
$('country_value').value=value;
}
</script>
<style type="text/css">		
#select_countries {
border: 1px solid #333;
margin-top: 5px;
height: 200px;
width: 200px;
overflow: auto;
}
</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Countries</legend>
<input type="text" name="country_value" id="country_value" value="United States" />
<input type="hidden" name="country_type" id="country_type" value="us" />
<a href="#" onclick="Element.show('select_countries'); return false;">Click to change</a><br />
<div id="select_countries" style="display: none;">
<div id="close" onclick="Element.hide('select_countries'); return false;">Close</div>
<div onclick="change_country('us', 'United states')"><img src="images/flags/us.gif" alt="us" /> United states</div>
<div onclick="change_country('ru', 'Russia')"><img src="images/flags/ru.gif" alt="us" /> Russia</div>
<div onclick="change_country('es', 'Spain')"><img src="images/flags/es.gif" alt="us" /> Spain</div>
<div onclick="change_country('ca', 'Canada')"><img src="images/flags/ca.gif" alt="ca" /> Canada</div>
</div>
</fieldset>
</form>
</body>
</html>
Initial URL 









Initial Description





Unable to use CSS for select tag?
Simple changes approve it.

P.S. Don't forget about prototype framework ()









Initial Title





DIV instead SELECT tag ()









Initial Tags





javascript









Initial Language





JavaScript