jquery 在php和js的自定义下拉选项中在文本输入框中显示src值的问题

jchrr9hc 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(93)

我有一个选择的图像是在一个文件中沿着随着一个数据库，我用来获得每个图像的网址。我有一个自定义的下拉选项，显示所有的图像和一个文本框，我想以后作为一个搜索选项工作。当在下拉列表中选择了一个图像时，我希望文本框的值显示该图像的src值。然而，它不起作用。下面是我的代码：

function Findimage() {
  var Clickedimage = event.target.getAttribute('src');
  $("#imglookupbox").val(Clickedimage);
}

.dropdown {
  position: relative;
  margin-top: 30px;
  float: left;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-menu li {
  cursor: pointer;
  padding: 5px;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}

#imglookupbox:focus+.dropdown .dropdown-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imglookupbox" type="text" value="" placeholder="Search" aria-label="Text input with dropdown button">
<div class="dropdown">
  <ul id="Imageoptions" class="dropdown-menu">
    <li>
      <img onclick='Findimage()' class='Img_Selection' src="DataBaseSetup/Images/ImageName" alt="no Image">
    </li>
  </ul>
</div>

代码不在ul元素中时可以工作，但它需要在其中才能使下拉效果工作。如有任何帮助，我们将不胜感激。

jquery

来源：https://stackoverflow.com/questions/76730987/problem-with-showing-src-value-in-text-input-box-from-custom-dropdown-option-wit

1条答案

按热度按时间

c7rzv4ha1#

看起来CSS中基于:focus的show/hide逻辑发生在JS中的click事件之前。也就是说，焦点一离开输入，菜单就隐藏了。这是在点击之前立即发生的（不易察觉），所以你实际上并没有点击菜单项。
一种替代方案是将显示/隐藏逻辑移到JavaScript中。您可以在单击菜单时隐藏该菜单，或者在单击远离输入时隐藏该菜单。举例来说：

function Findimage() {
  var Clickedimage = event.target.getAttribute('src');
  $("#imglookupbox").val(Clickedimage);
  $('#imglookupbox + .dropdown .dropdown-menu').hide();
  event.stopPropagation();
}

$('#imglookupbox').on('focus', function (e) {
  $('#imglookupbox + .dropdown .dropdown-menu').show();
});

$(document).on('click', function (e) {
  if ($(e.target).closest('#imglookupbox').length === 0) {
    $('#imglookupbox + .dropdown .dropdown-menu').hide();
  }
});

.dropdown {
  position: relative;
  margin-top: 30px;
  float: left;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  max-height: 150px;
  overflow-y: auto;
}

.dropdown-menu li {
  cursor: pointer;
  padding: 5px;
}

.dropdown-menu li:hover {
  background-color: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imglookupbox" type="text" value="" placeholder="Search" aria-label="Text input with dropdown button">
<div class="dropdown">
  <ul id="Imageoptions" class="dropdown-menu">
    <li>
      <img onclick='Findimage()' class='Img_Selection' src="DataBaseSetup/Images/ImageName" alt="no Image">
    </li>
  </ul>
</div>

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 在php和js的自定义下拉选项中在文本输入框中显示src值的问题

1条答案

相关问题

热门标签

最新问答