activate the select by clicking on the block

Question

How to activate select if i click on block? I found several options on the Internet, but none of them works.Where is the mistake?

html

<li name='click' class="nav-link" id="demoShowSelected">
    <img class=" ukr"  src="{{ URL::asset('images/ukraine.svg')}}">
    <img class=" eng" src="{{ URL::asset('images/united-kingdom.svg')}}">
    <img class=" rus" src="{{ URL::asset('images/russia.svg')}}">
    <select  name="select" id="selectLaung">
        <option value="ukr">Українська</option>
        <option value="rus">Русский</option>
        <option value="eng">English</option>
    </select>
</li>

Jquery

$(document).on("click", "[name='click']", function () {

    var myEvent = document.createEvent("MouseEvents");
    myEvent.initMouseEvent("mousedown");
    $("[name='select']")[0].dispatchEvent(myEvent);

});

Answer 1

My assumption: -What you want is that when you click on li images you want to open select-box.

Do like below:

$(function() {
    $(document).on("click", "li img", function (e) {
        var $target = $("#selectLaung");
        var $clone = $target.clone().removeAttr('id');
        $clone.val($target.val()).css({
            overflow: "auto",
            position: 'absolute',
            'z-index': 999,
            left: $target.offset().left,
            top: $target.offset().top + $target.outerHeight(),
            width: $target.outerWidth()
        }).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() {
            $target.val($clone.val());
        }).on('click blur keypress',function(e) {
         if(e.type !== "keypress" || e.which === 13)
            $(this).remove();
        });
        $('body').append($clone);
        $clone.focus();
    });
});

li{
 list-style:none;
 float:left;
 width:100%;
}

li img{
 cursor:pointer;
 float:left;
 width:50px;
 height:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li name='click' class="nav-link" id="demoShowSelected">
  <img class=" ukr"  src="https://www.prototypo.io/wp-content/uploads/2018/06/Claire-Bartoux-50x50-c-default.jpg">
  <img class=" eng" src="http://varsitysportssa.com/wp-content/uploads/2019/02/Juli-Vercuiel-50x50.png">
  <img class=" rus" src="https://stepcdn.com/assets/2017-10/23/12/4h9fn/capture-png-50x50.png">
  <select  name="select" id="selectLaung">
      <option value="ukr">Українська</option>
      <option value="rus">Русский</option>
      <option value="eng">English</option>
  </select>
</li>

Note: You have to check this in all browsers. As i saw lot of posts and answers and got to know that multiple answers not worked in all browsers.