javascriptを使用してフォーム要素に.click（）イベントを追加するには？

HTMLコード：javascriptを使用してフォーム要素に.click（）イベントを追加するには？

<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ファイルは "select option/option/select"タグでは機能しませんが、 "ul li/ul"タグの下に画像を提供すると作業が始まります。

出典

2016-08-05 Bhaskar Saurabh Vicky

よう

何か、あなたは。のdocument.getElementById（ "ID"） 'を使用することができますは、addEventListener（ 'クリック'、機能（）{はconsole.log（」何かしてください）}） ' – Mostafa

あなたの質問の第2部分を詳細に教えてください。別のブラウザウィンドウで新しい画像を開きますか？ – GibboK

まず、HTMLは無効です。 – Kaiido

を試してみます。 jQueryのから

ドキュメントの詳細：https://api.jquery.com/click/

では、このようなバニラの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>

出典

2016-08-05 08:16:50 GibboK

onclick（）に新しい画像を生成できますか？

@BhaskarSaurabhVicky

あなたは以下の例のようにjQueryを使ってフォーム要素に.click()イベントを追加することができ、この

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

出典

2016-08-05 06:09:16

あなたがこれを行うべきではありませんなぜなら、input、select、textarea要素のレンダリングはオペレーションシステムに依存しているから、私は確かにt帽子操作システムオプションの中にプレーンテキスト以外のものを使用できません。あなたの仕事をするには、ロジックを行うonchangeイベントを追加する必要があります。動的に任意の要素にクリックイベントを追加するため、この

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

出典

2016-08-05 08:21:58 degr

javascriptを使用してフォーム要素に.click（）イベントを追加するには？

答えて

関連する問題