jquery - 通过单击 block 激活选择

Question

如果我点击阻止，如何激活选择？我在网上找了好几个办法，但都不起作用。错误出在哪里？

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

我的假设: - 您想要的是，当您单击 li 图像 时，您想要打开选择框。

如下所示:

$(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>

注意:您必须在所有浏览器中检查此项。因为我看到了很多帖子和答案，并了解到多个答案并非在所有浏览器中都有效。