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 images时要打开选择框。

执行以下操作：

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

注意：您必须在所有浏览器中选中此选项。正如我看到的许多帖子和答案，并知道在所有浏览器中都无法使用多个答案。

通过单击块激活选择

1 个答案: