Question

HTML code：

<body>
  <select multiple="multiple" id="imglist" class="image-picker show-html">
    <option><a href="http://placekitten.com/220/200" target="_blank">Cute Kitten 1</a></option>
    <option><a href="http://placekitten.com/180/200" target="_blank">Cute Kitten 1</a></option>
    <option><a href="http://placekitten.com/130/200" target="_blank">Cute Kitten 1</a></option>
  </select>
</body>

CSS代码：

.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('https://cdn0.iconfinder.com/data/icons/feather/96/circle-check-128.png') !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代码：

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) {
    o.parentNode.removeChild(o.parentNode.getElementsByTagName('img')[0]);

  } else {
    newimg = document.createElement('img');
    newimg.style.display = 'block';
    newimg.onclick = function() {
      this.parentNode.removeChild(this);
    };
    newimg.src = o.href;
    o.parentNode.appendChild(newimg)
  }
  return false;
}

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

我想在点击选项标签时生成图片。点击选项标签图像后应隐藏。如果我选择第一个选项标签，它应该显示图像。与所有选项标签相同。我的js文件不适用于标签＆＃34;选择选项/选项/选择＆＃34;但如果我提供图像＆＃34; ul li / li / ul＆＃34;标记它开始工作。

Answer 1

你试过这个

var btn = document.createElement("form");
btn.addEventListener('click', keyFunction);
document.body.appendChild(btn);

Answer 2

您可以使用jQuery在表单元素上添加.click()事件，如下例所示。

来自jQuery的文档详细信息：https://api.jquery.com/click/

In可以在vanilla JavaScript（没有jQuery）中做同样的事情：

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

$(function() {
  $('#imglist').click(function(event) {
    alert(event.target.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
</select>

Answer 3

你不应该这样做，因为输入，选择和textarea元素渲染依赖于操作系统，而且我确信，操作系统不允许使用除选项内的纯文本之外的东西。要完成你的任务，你应该添加onchange事件，你将在那里做你的逻辑。

像这样的东西

var select = document.getElement...
var option = select.options[select.selectedIndex];
switch(option.value){
  case '1':
  case 1:
    console.log(1)
    break;
}

如何使用javascript在表单元素上添加.click（）事件？

3 个答案: