Bhaskar Saurabh Vicky Bhaskar Saurabh Vicky - 1 year ago 109
CSS Question

How to add .click() event on form element using javascript?

HTML code:

<select multiple="multiple" id="imglist" class="image-picker show-html">
<option><a href="" target="_blank">Cute Kitten 1</a></option>
<option><a href="" target="_blank">Cute Kitten 1</a></option>
<option><a href="" target="_blank">Cute Kitten 1</a></option>

CSS code:

.thumbnails {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px;

.thumbnails li {
float: left;

.image-picker option {
border-radius: 15px;

.image_picker_image {
border-radius: 118px !important;
height: 50px !important;
width: 50px !important;

ul.thumbnails.image_picker_selector li .thumbnail.selected {
/* background: #fff !important; */
border: 0px !important;
filter: alpha(opacity=40) !important;
opacity: 0.6 !important;
background-image: url('') !important;
background-size: contain !important;

ul.thumbnails.image_picker_selector li .thumbnail {
border: 0px !important;

ul.thumbnails.image_picker_selector li .thumbnail.selected {
background: #fff !important;

Javascript Code:

function imgpop() {
var il, imga, imgatxt;
il = document.getElementById('imglist').getElementsByTagName('option');
for (i = 0; i < il.length; i++) {
imga = il[i].getElementsByTagName('a')[0];
imgatxt = imga.firstChild;
imgatxt.nodeValue = imgatxt.nodeValue.replace(/ \(new window\)/, '');
imga.onclick = function() {
return popw(this);
//imga.onkeypress=function(){return popw(this);}

function popw(o) {
var newimg;
if (o.parentNode.getElementsByTagName('img').length > 0) {

} else {
newimg = document.createElement('img'); = 'block';
newimg.onclick = function() {
newimg.src = o.href;
return false;

if (document.getElementById && document.createTextNode) {
window.onload = function() {

I want to generate image on click of option tag. And after clicking on option tag image should be hide. If I select first option tag, it should display image. and same with all the option tag.
My js file is not working for tags " select option /option /select" but if I provide image under " ul li /li /ul" tag it start working.

Answer Source

You can add an .click() event on form element using jQuery as in the below example.

Documentation details from jQuery:

In can do the same in vanilla JavaScript (no jQuery) like this:

document.getElementById("imglist").addEventListener('click', function (){console.log('execute on click')});

$(function() {
  $('#imglist').click(function(event) {
<script src=""></script>
<select multiple="multiple" id="imglist" class="image-picker show-html">
  <option>Cute Kitten 1</option>
  <option>Cute Kitten 2</option>
  <option>Cute Kitten 3</option>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download