jQuery下拉菜单取值异常：无法获取选中选项值

首先，你的代码核心问题在于用连续的prev()方法定位DOM元素完全不可靠，而且这种方式根本没正确定位到下拉菜单（#category）。咱们一步步拆解问题：

为什么拿不到下拉菜单的值？ #

你写的$(this).prev().prev().prev()...链式调用，是逐个查找当前元素的前一个兄弟节点。但看你的DOM结构：

<button class='submitreport'>Submit</button>

它的前一个兄弟是<br>，再前一个是文本框#content，再往前又是<br>，再往前是<p>标签里的"Details:"文本，根本到不了外面的<select>元素。所以你定义的b1、b2等变量，要么拿到的是<br>的空值，要么是文本框的值，完全碰不到下拉菜单。

另外还有几个小问题：

• <select>标签写了两个name属性（name='dropdown'和name='cat'），这是无效HTML，浏览器只会识别第一个name属性；
• live()方法在jQuery 1.7之后就被废弃了，推荐用on()来绑定事件；
• 你的my_data里有重复的键（比如两次'b2':b2），会导致后面的键值对覆盖前面的，虽不影响运行但没必要。

修复后的代码 #

直接通过ID选择器获取元素值是最可靠的方式，因为你的下拉菜单和文本框都有明确的ID：

<input type="hidden">
<select name='dropdown' size=1 id='category'> <!-- 去掉重复的name属性 -->
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option> <!-- 修正了第三个选项的value错误 -->
</select>
<p>
  Details:<br>
  <input type='text' rows='4' cols='50' id='content' /><br>
  <button class='submitreport'>Submit</button>
</p>
<script type='text/javascript'>
$(function() {
  // 用on()代替live()，绑定事件到最近的静态父元素或document
  $(document).on('click', '.submitreport', function() {
    // 直接通过ID获取对应的值
    const categoryVal = $('#category').val();
    const contentVal = $('#content').val();
    
    const my_data = {
      'category': categoryVal,
      'content': contentVal
      // 若有其他需要获取的元素，同样用ID/class选择器定位，别再用prev()
    };
    
    console.log(my_data);
    // 这里可以继续编写提交逻辑
  });
});
</script>

关键改进点 #

• 用$('#category').val()直接获取下拉菜单选中值，下拉菜单的val()方法本身就会返回选中选项的value属性值；
• 事件绑定改用on()，这是jQuery目前推荐的事件委托方式；
• 去掉无效的重复属性，修正了下拉菜单第三个选项的value错误；
• 摒弃了prev()这种依赖DOM结构的脆弱写法，让代码更易维护。

这样修改后，就能正常获取到下拉菜单和文本框的值了。

内容的提问来源于stack exchange，提问作者David Spira