使用下拉菜单的div填充隐藏的表单字段（使用未选中的div，选项等创建下拉菜单）

Question

我有一个表格。

请注意，我必须使用div来创建表单下拉列表，而不要使用select选项方法等。它只需要这样做。 代码如下。

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

如上面的代码所示，我需要根据用户在下拉菜单中选择的所选选项填充隐藏字段值。

我使用了大约20种不同的getElementById或onFocus函数变体，但无法使其正常工作。

我唯一可以使用的是以下JavaScript，它仅使用第一个ID填充隐藏字段值，而完全忽略了用户实际上已选择（单击）的那个字段。

var div = document.getElementById('DivID');
var hidden = document.getElementById('ChosenCategory');
hidden.value = div.innerHTML;

我正在运行经典的ASP，因此，如果有一种vbscript方式，那就太好了；否则，如果我必须使用JavaScript来做到这一点，那么只要它能完成工作，我仍然会很高兴。

Answer 1

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

不需要jQuery或任何其他外部库。 下面是一个工作示例。 当然，在您的情况下， input元素的类型可能是hidden ，但出于演示目的，在此处将其作为text 。

 //Add the click handlers var options = document.getElementsByClassName('option'); var i = 0; for (i = 0; i < options.length; i++) { options[i].addEventListener('click', selectOption); } function selectOption(e) { console.log(e.target); document.getElementById('output').value = e.target.id; } 

 div { padding: 10px; } div.option { background-color: #CCC; margin: 5px; cursor: pointer; } 

 <div> <div class="option" id="Category1">Category One</div> <div class="option" id="Category2">Category Two</div> </div> <input type="text" id="output" /> 

Answer 2

您应该能够通过一个相当简单的设置来实现您的目标，该设置涉及侦听两个单独的<div>元素的点击，然后根据这些点击来更新<input> 。

TL; DR：

我在这里拼凑了一个jsfiddle，听起来像是您正在努力工作： https ://jsfiddle.net/e479pcew/5/

长版：

想象一下，我们有2个基本要素：

• 包含两个选项的下拉菜单
• 输入

这是在HTML中的外观：

<div class="dropdown">
    <div id="option-one">Option 1</div>
    <div id="option-two">Option 2</div>
</div>

<input type="text" id="hidden-input">

连接这些元素所需的JavaScript应该很容易，但是如果没有用，请告诉我！ 我已经对所有内容进行了重命名，以使内容尽可能明确，但希望不会让您失望。

一件简单的事情-这是这种想法的“天真”实施，具有很大的重构潜力！ 但是，我只是想以最基本的方式来说明如何使用JavaScript来实现这一目标。

因此，我们开始-首先要做的是，让我们找到我们需要的所有那些元素。 我们需要为两个不同的下拉选项和隐藏的输入分配变量：

var optionOne = document.getElementById("option-one");
var optionTwo = document.getElementById("option-two");
var hiddenInput = document.getElementById("hidden-input");

凉。 接下来，我们需要制作一个稍后会派上用场的函数。 该函数期望将click事件作为参数。 从该click事件中，它将查看被单击元素的id ，并将该ID作为值分配给我们的hiddenInput ：

function valueToInput(event) {
  hiddenInput.value = event.target.id;
}

太好了-最后，让我们开始侦听特定元素的点击，如果听到任何点击，我们将触发上面的valueToInput函数：

optionOne.addEventListener("click", valueToInput, false);
optionTwo.addEventListener("click", valueToInput, false);

那应该让你走！ 看看我已经链接的jsfiddle，看看是否有意义-如果没有联系，请保持联系。

Answer 3

您是否可以在该项目中使用JQuery？ 它将使您的生活更加轻松。 您可以检测单击div的时间并填充隐藏字段。

这可以做到：

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