可编辑的选择

Editable select

本文关键字：选择 编辑      更新时间：2023-09-26

下面是我的HTML代码:

<div class="editable-select-holder">
    <input type="text" name="position" id="position" value="${userInfoForm.position}">
    <button type="button" class="editable-select-expander"></button>
    <ul class="editable-select-options">
        <c:forEach var="position" items="${positions}">
            <li>${position.description}</li>
        </c:forEach>
    </ul>
</div>
这是Jquery: 
$(document).on('click', '.editable-select-expander', function () {
    var $holder = $(this).parent();
    $holder.toggleClass('editable-select-expanded');
    $holder.on('click', 'li', function () {
        var $t = $(this);
        $holder.removeClass('editable-select-expanded');
        $holder.find('input').val($t.text());
    });
});

当我点击按钮或关注输入时，我想扩展列表。我上面提供的代码只适用于按钮单击。我也需要同样的逻辑聚焦事件。有什么建议吗?

做了这样的修改，但仍然不能正常工作。

 $(document).on("click",'.editable-select-holder', function() {
                var $holder = $(this);
                $holder.on('click','.editable-select-expander', function() {
                    $holder.toggleClass('editable-select-expanded');
                });
                $holder.on('click', 'li', function() {
                    var $t = $(this);
                    $holder.removeClass('editable-select-expanded');
                    $holder.find('input').val($t.text());
                });
                $holder.on('focus', 'input', function() {
                    $holder.addClass('editable-select-expanded');
                });
            });

希望你能使用这段代码

  $( your input box id or class ).focusin(function() {
  //your logic here
  });
相关文章：