自定义下拉选项选中图片后文本框无法显示图片src值的问题求助（PHP+JS）

嘿，我看了你的代码，发现问题主要出在事件参数传递和焦点丢失导致下拉菜单瞬间隐藏这两个地方，我来给你一步步解决：

问题分析 #

• 事件对象未正确传递：你用内联onclick='Findimage()'调用函数，但没有把event参数传进去，在部分浏览器里，全局的event对象可能无法正确获取到点击的图片元素，导致event.target拿不到src值。
• 焦点丢失导致下拉菜单瞬间隐藏：当你点击图片时，文本框会立刻失去focus状态，触发CSS里的隐藏逻辑，可能事件还没执行完菜单就消失了，看起来像是没有效果。

解决方案一：快速修复内联事件传递 #

先修改你的内联点击事件，把event传进去，同时调整函数接收参数：

function Findimage(event) {
    // 确保target是图片元素，防止点击到li标签本身
    var clickedImg = event.target.tagName === 'IMG' ? event.target : event.target.querySelector('img');
    var imgSrc = clickedImg.getAttribute('src');
    $("#imglookupbox").val(imgSrc);
    // 可选：点击后让文本框重新获得焦点，避免下拉菜单立刻消失
    $("#imglookupbox").focus();
}

对应的HTML里修改图片的onclick属性：

<img onclick='Findimage(event)' class='Img_Selection' src="DataBaseSetup/Images/ImageName" alt="no Image">

解决方案二：用jQuery事件委托（更推荐） #

内联事件不太好维护，用jQuery的事件委托更可靠，还能轻松处理后续动态生成的图片选项：

首先去掉图片的onclick属性：

<img class='Img_Selection' src="DataBaseSetup/Images/ImageName" alt="no Image">

然后添加以下JS代码：

$(document).ready(function() {
    // 给下拉菜单里的图片绑定点击事件（支持动态生成的元素）
    $('#Imageoptions').on('click', '.Img_Selection', function() {
        // 直接获取当前点击图片的src
        var imgSrc = $(this).attr('src');
        // 填充到文本框
        $("#imglookupbox").val(imgSrc);
        // 保持文本框焦点，防止下拉菜单隐藏
        $("#imglookupbox").focus();
    });

    // 优化下拉菜单交互：点击页面其他地方再隐藏菜单
    $(document).on('click', function() {
        $('.dropdown-menu').hide();
    });

    // 点击文本框或下拉区域时，显示菜单并阻止事件冒泡
    $('#imglookupbox, .dropdown').on('click', function(e) {
        e.stopPropagation();
        $('.dropdown-menu').show();
    });
});

这样修改后，不仅能正确获取图片的src填充到文本框，还能优化下拉菜单的交互体验，不会因为点击图片就立刻消失。你可以先试试第一种方案快速验证问题，如果后续要添加更多动态图片选项，第二种事件委托的方式会更合适。

备注：内容来源于stack exchange，提问作者Liam Morton