将输入功能添加到 HTML select 选项下拉列表

Question

现在 JS 后面使用的 search_type 始终是 "people" 可以在隐藏的输入字段中看到。

我怎样才能使所选选项的值成为与名称 "search_type" 关联的值？

<input type="hidden" name="search_type" value="people"> <!-- This obviously needs to change-->
<div class="medium-4 columns">
   <select>
      <option value="default">All Categories</option>
      <option value="people">People</option>
      <option value="items">Items</option>
   </select>
</div>

我尝试将所有选项的名称更改为 search_type，但这没有用。我也尝试过其他事情，但无法弄清楚。任何帮助将不胜感激。

这是调用它的 Javascript 行：

search_type: $('input[name="search_type"]').val(),

注意：我在 Zurb 基金会工作

Answer 1

简单地说，当你已经有了一个完美可用的输入框时，就没有必要再添加另一个输入框了！更改您的代码，使 <select> 包含 name 属性，就像这样，并摆脱隐藏的输入：

<div class="medium-4 columns">
   <select name="search_type">
      <option value="default">All Categories</option>
      <option value="people">People</option>
      <option value="items">Items</option>
   </select>
</div>

将输入功能添加到 HTML select 选项下拉列表

Adding input capabilities to HTML select option dropdown

html

zurb-foundation

html-input