JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="block">
<select id="ucPreviewPicture_lbPictures" size="4">
               <option value="http://images.nationalgeographic.com/wpf/media-live/photos/000/687/cache/bonobo-congo-ziegler_68751_990x742.jpg">one</option>
               <option value="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg">two</option>
               <option value="http://media.npr.org/images/picture-show-flickr-promo.jpg">three</option>
               <option value="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg">four</option>
       </select>
 </div>
<p>
<div id="previewUploadPicture"></div>
<p><br>
<div class="ctrl-imagepath">
				<span>Image URL:</span>
				<input name="ucHtmlImgEditor$txtUrl" type="text" value="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg"
				       id="ucHtmlImgEditor_txtUrl" disabled="disabled" class="aspNetDisabled"/>
				<span>Description:</span>
				<input name="ucHtmlImgEditor$txtDescription" type="text" value="image2"
				       id="ucHtmlImgEditor_txtDescription" disabled="disabled" class="aspNetDisabled"/>
			</div>

CSS

#previewUploadPicture img{
    display: block;
    position: aboslute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: auto;
}

#block{
    display:inline-block;
    vertical-align:top;
    overflow:hidden;
    border:solid grey 1px;
}

#block select{
    padding:10px;
    margin:-5px -20px -5px -5px;
}

JavaScript

function showImage(){
    
    var div = document.createElement("div"),
    prefix = ["moz","webkit","ms","o"].filter(function(prefix){
    return prefix+"MatchesSelector" in div;
    })[0] + "MatchesSelector";
    
    Element.prototype.addDelegateListener = function( type, selector, fn ) {

    this.addEventListener( type, function(e){
        var target = e.target;
        
        while( target && target !== this && !target[prefix](selector) ) {
            target = target.parentNode;
        }
        
        if( target && target !== this ) {
            return fn.call( target, e );
        }
        
    }, false );
};

var __a = document.getElementById('ucPreviewPicture_lbPictures'),
    view = document.getElementById('previewUploadPicture'),
    input = document.getElementById('ucHtmlImgEditor_txtUrl');
    
    view.innerHTML = '<img src="'+input.value+'" alt="image"/>';

    handler = function(e){
        e.preventDefault();
        var val = __a.value;
        view.innerHTML = '<img src="'+val+'" alt="image"/>';
        input.value = val;
    };
    
__a.addDelegateListener('click', 'option', handler);
}

window.onload = function(){
    showImage();
}



/*
element.attachEvent('onclick',handlerFunction);
*/