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 ()


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.