下拉列表获取选中值失败问题排查（HTML/JQuery）

你用$(".room").val()获取下拉值时，.room选择器匹配的是所有带room类的<option>元素。jQuery的.val()方法在选中多个元素时，只会返回第一个匹配元素的value值，所以不管你选中下拉里的哪一项，它都会返回第一个<option>的"testing"。

要正确获取下拉的选中值，应该直接选中<select>元素来调用.val()，而不是去选<option>：

• 如果页面上只有这一个下拉列表，直接用标签选择器即可：

var value = $("select").val();

• 更稳妥的方式是给<select>加个唯一标识（比如id），避免和页面其他下拉冲突：
  修改后的HTML：

<select id="room-select">
  <option value="testing">testing</option>
  <option value="hello">hello</option>
  <option value="lobby">lobby</option>
  <option value="this is a test room">this is a test room</option>
  <option value="gabe and samsons cave">gabe and samsons cave</option>
  <option value="gabe">gabe</option>
  <option value="rfe2209">rfe2209</option>
</select>

对应的JS代码：

var value = $("#room-select").val();

另外，你给所有<option>加的room类其实是多余的，完全可以去掉，不影响下拉值的获取。

内容的提问来源于stack exchange，提问作者Brian S