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;标记它开始工作。
答案 0 :(得分:0)
你试过这个
var btn = document.createElement("form");
btn.addEventListener('click', keyFunction);
document.body.appendChild(btn);
答案 1 :(得分:0)
您可以使用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>
答案 2 :(得分:0)
你不应该这样做,因为输入,选择和textarea元素渲染依赖于操作系统,而且我确信,操作系统不允许使用除选项内的纯文本之外的东西。要完成你的任务,你应该添加onchange事件,你将在那里做你的逻辑。
像这样的东西
var select = document.getElement...
var option = select.options[select.selectedIndex];
switch(option.value){
case '1':
case 1:
console.log(1)
break;
}