javascript - 使用下拉菜单的 div 填充隐藏的表单字段(下拉菜单是使用 div 而不是选择、选项等创建的)

Question

我有一个表格。

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

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