Advanced Search

DIV instead SELECT tag ()

/ Published in: JavaScript
Save to your folder(s)
Unable to use CSS for select tag?
Simple changes approve it.

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <script type='text/javascript' src='js/prototype.js'></script>
  4. <script type='text/javascript'>
  5. function change_country(type, value) {
  6. $('country_type').value=type;
  7. $('country_value').value=value;
  8. }
  9. </script>
  10. <style type="text/css">		
  11. #select_countries {
  12. border: 1px solid #333;
  13. margin-top: 5px;
  14. height: 200px;
  15. width: 200px;
  16. overflow: auto;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <form action="" method="post">
  22. <fieldset>
  23. <legend>Countries</legend>
  24. <input type="text" name="country_value" id="country_value" value="United States" />
  25. <input type="hidden" name="country_type" id="country_type" value="us" />
  26. <a href="#" onclick="Element.show('select_countries'); return false;">Click to change</a><br />
  27. <div id="select_countries" style="display: none;">
  28. <div id="close" onclick="Element.hide('select_countries'); return false;">Close</div>
  29. <div onclick="change_country('us', 'United states')"><img src="images/flags/us.gif" alt="us" /> United states</div>
  30. <div onclick="change_country('ru', 'Russia')"><img src="images/flags/ru.gif" alt="us" /> Russia</div>
  31. <div onclick="change_country('es', 'Spain')"><img src="images/flags/es.gif" alt="us" /> Spain</div>
  32. <div onclick="change_country('ca', 'Canada')"><img src="images/flags/ca.gif" alt="ca" /> Canada</div>
  33. </div>
  34. </fieldset>
  35. </form>
  36. </body>
  37. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.