Javascript 使用下拉菜单的div填充隐藏表单字段（使用divs not select、option等创建下拉菜单）

我有一张表格

请注意，我必须使用divs来创建表单下拉列表，而不是选择选项方法等。必须这样做。代码如下

<form action="url.asp" method="get">
<div class="search-button"><i class="fa fa-search"></i><input type="submit" /></div>
    <div class="search-drop-down">
        <div class="title"><span>Choose Category</span><i class="fa fa-angle-down"></i></div>
            <div class="list">
                    <div class="overflow">
                           <div class="category-entry" id="Category1">Category One</div>
                           <div class="category-entry" id="Category2">Category Two</div>
                    </div>
            </div>
       </div>
       <div class="search-field"><input type="text" name="search-for" id="search-for" value="" placeholder="Search for a product" /></div>
       <input type="hidden" id="ChosenCategory" name="ChosenCategory" value="CATEGORY1 OR CATEGORY2 (WHICHEVER SELECTED)" />
                                </form>

---

我运行的是经典的asp，如果有vbscript的方法，那就太好了，否则如果我必须使用JavaScript来完成，那么只要它能完成任务，我还是会很高兴的。

你可以在这个项目中使用JQuery吗？这会让你的生活轻松很多。您可以检测何时单击div并填充隐藏字段

这可以做到：

$(document).ready(function() {
    $('.category-entry').click(function() {
        $('#ChosenCategory').val($(this).text()); }); });

---

选项上的单击处理程序可用于更新值

不需要jQuery或任何其他外部库。下面是一个工作示例。当然，在您的例子中，输入元素可以是hidden类型，但是为了演示，我在这里将其设置为文本

//添加单击处理程序 var options=document.getElementsByClassName'option'； var i=0； 对于i=0；i TL；博士：

我在这里整理了一个JSFIDLE，它听起来像是您正在努力实现的目标：

长版本：

假设我们有两个基本要素：

包含两个选项的下拉列表 输入 以下是它在HTML中的外观：

选择1 选择2 连接这些元素所需的JavaScript应该相当简单，但如果没有意义，请告诉我！我在整个过程中都对事物进行了重命名，以使事物尽可能明确，但希望这不会让您感到厌烦

一件简单的事情-这是一个难以置信的“幼稚”的实现这个想法，有很多重构的潜力！然而，我只是想用最基本的术语展示如何使用JavaScript实现这一点

所以我们开始吧——首先，让我们找到所有我们需要的元素。我们需要为两个不同的下拉选项和隐藏输入分配变量：

var optionOne=document.getElementByIdoption-one； var optionTwo=document.getElementByIdoption-2； var hiddenInput=document.getElementByIdhidden-input； 酷。接下来，我们需要制作一个函数，它将在以后派上用场。此函数需要单击事件作为参数。从该单击事件中，它查看被单击元素的id，并将该id作为值分配给hiddenInput：

函数值输入事件{ hiddenInput.value=event.target.id； } 很好-最后一件事，让我们开始聆听特定元素上的点击，如果我们听到任何点击，我们将启动上面的valueToInput函数：

optionOne.addEventListenerclick，valueToInput，false； optionTwo.AddEventListener单击，valueToInput，false；

---

那会让你走的！看看我已经链接到的JSFIDLE，看看它是否有意义——如果没有，请联系。

代码中的这三行JavaScript在哪里？类别选项是否有某种类型的点击处理程序？放在表单元素之后，我认为这是我正在努力处理的点击处理程序，因为我尝试的一切都失败了。因为你使用的是divs而不是select下拉列表，用户选择选项的点击事件的javascript是什么样的，我目前没有点击事件，因为我尝试了很多事情，我在这里询问选项，SunKnight0的建议也不起作用。您不需要jquery来检测何时点击了div。我尝试过这一点，但在提交表单时，ChosenCategory为空。任何明显我做错了的事情，我都必须看到整个代码才能发现问题。devlin carnate，当然jquery只是一个包装器，没有它你可以做任何事情。这只会让事情变得更简单更干净。这很有效！我如何将此标记为已回答！谢谢@很高兴我能帮上忙。在帖子左侧的投票箭头下方有一个复选标记，用于标记答案为已接受。谢谢，我想这是我没有尝试的唯一变体，但愿我在几个小时前问过

$(document).ready(function() {
    $('.category-entry').click(function() {
        $('#ChosenCategory').val($(this).text()); }); });