如何利用JavaScript将隐藏输入框的值设置为下拉选择框的选中项索引

没问题，这事儿很简单，我们只需要利用原生JavaScript监听下拉框的变化事件，把选中项的索引（从0开始计数）同步到隐藏输入框即可。下面是具体的实现方案：

完整代码实现 #

<div class="form-group">
  <input type="hidden" id="arrayIndex" name="arrayIndex">
  <label for="dishCategory">Choose a category:</label>
  <select type="text" class="form-control" name="dishCategory" id="dishCategory">
    {{#entries}}
      {{#category}}
        <option value="{{catName}}">{{catName}}</option>
      {{/category}}
    {{/entries}}
  </select>
</div>

<script>
// 获取页面中的下拉框和隐藏输入框元素
const dishCategorySelect = document.getElementById('dishCategory');
const arrayIndexInput = document.getElementById('arrayIndex');

// 页面加载完成后，先初始化隐藏输入框的值为当前选中项的索引
arrayIndexInput.value = dishCategorySelect.selectedIndex;

// 监听下拉框的change事件，每次用户切换选项时更新隐藏输入框的值
dishCategorySelect.addEventListener('change', function() {
  arrayIndexInput.value = this.selectedIndex;
});
</script>

关键知识点解析 #

• selectedIndex属性：这是HTML下拉选择框（HTMLSelectElement）的原生属性，直接返回当前选中项的索引值，索引从0开始计数——正好匹配你需要的逻辑：第一个选项存0，第二个存1，以此类推。
• 初始化值：页面加载时就设置隐藏输入框的初始值，避免用户没有修改下拉框就提交表单时，隐藏字段为空的情况。
• 实时同步：通过addEventListener监听下拉框的change事件，确保用户每切换一次选项，隐藏输入框的值都会立刻更新。

可选：jQuery版本（如果你的项目使用jQuery） #

如果你的项目依赖jQuery，也可以用下面的写法实现同样的效果：

$(document).ready(function() {
  // 初始化值
  $('#arrayIndex').val($('#dishCategory').prop('selectedIndex'));
  
  // 监听选项变化
  $('#dishCategory').on('change', function() {
    $('#arrayIndex').val($(this).prop('selectedIndex'));
  });
});

内容的提问来源于stack exchange，提问作者Jack Duffy